I have two components, the parent App component and a child component (Checkbox component) in this scenario. I have a checkbox inside the child component when this checkbox is clicked or checked.

I want the result to be displayed on the console only when a button is clicked inside the parent component. What I have presently is only showing on the console when the checkbox is checked and this is happening inside the child component.

import { useState } from "react";

// import Checboxtest from "./Checkboxtest";
import "./styles.css";

// const Person = props => (
const Checboxtest = ()=> {
  const [isChecked, setIsChecked] = useState(false);
  const [checkboxvalue, setcheckboxvalue] = useState("");
  const handleOnChange = (e) => {
    setIsChecked(!isChecked);
    setcheckboxvalue(e.target.value);
  };

  return (
    <div className="App">
      <h1>Checkbox Value </h1>
      <input
        type="checkbox"
        id="Orange"
        name="Orange"
        value="Orange"
        checked={isChecked}
        onChange={handleOnChange}
      />
      Orange
      {isChecked ? console.log(checkboxvalue) : console.log("nill")}
    </div>
  );
}


export default function App() {
  return (
    <div className="App">
      <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
      <button>See checkbox value</button>
      <Checboxtest  />
    </div>
  );
}

CodePudding user response：

You need another state value to control this scenario. It can be implemented in your App component or inside of your Checkbox component.

Let implement the state in the parent component, so define a state in the App component:

export default function App() {
  // create a state value
  const [showResult, setShowResult] = useState(false);
  // create handler 
  const handleShowResult = () => setShowResult(prevState => !prevState)

  return (
    <div className="App">
      <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
      <button onClick={handleShowResult}>See checkbox value</button>
      <Checboxtest  showResult={showResult}/>
    </div>
  );
}

When you click on the button, the showResult value will change. the showResult props will pass the state of checkbox result visibility to the Checkbbox component.

Now, implement the showResult props in the Checkbox:

const Checboxtest = ({showResult})=> {
  const [isChecked, setIsChecked] = useState(false);
  const [checkboxvalue, setcheckboxvalue] = useState("");

  const handleOnChange = (e) => {
    setIsChecked(!isChecked);
    setcheckboxvalue(e.target.value);
  };

  return (
    <div className="App">
      <h1>Checkbox Value </h1>
      <input
        type="checkbox"
        id="Orange"
        name="Orange"
        value="Orange"
        checked={isChecked}
        onChange={handleOnChange}
      />
      // check showResult value 
      Orange
      {showResult ? console.log(checkboxvalue) : console.log("nill")}
    </div>
  );
}

CodePudding user response：

You can manage state on the parent component i.e. in App.js and pass the isChecked and changeCheckBoxValue to Checboxtest. so that checked value is propagated to parent value and when you click button, App.js component has all details.

App.js

import React, { useState } from 'react';
// import Test from './Test';
import Checboxtest from './Checboxtest';

const App = () => {
    const [isChecked, setIsChecked] = useState( false );
    const [checkboxvalue, setcheckboxvalue] = useState("nil");

    const changeCheckBoxValue = (e) => {
        const val = e.target.value;
        setIsChecked(state => !state);
        isChecked ? setcheckboxvalue("nil"): setcheckboxvalue(val);
    }

    const seeCheckedValue = () => {
        console.log( checkboxvalue )
    }
    return (
        <div>
            <div className="App">
                <h1>When clicked on the button below, the value of the checkbox inside the child component should be display on the console.</h1>
                <button onClick={seeCheckedValue}>See checkbox value</button>
                <Checboxtest isChecked={isChecked}
                             changeCheckBoxValue={changeCheckBoxValue}
                />
            </div>
        </div>
    );
};

export default App;

Checboxtest Component

const Checboxtest = ( { isChecked, changeCheckBoxValue } ) => {
    return (
        <div className="App">
            <h1>Checkbox Value </h1>
            <input
                type="checkbox"
                id="Orange"
                name="Orange"
                value="Orange"
                checked={isChecked}
                onChange={changeCheckBoxValue}
            />
            Orange
        </div>
    );
}

export default Checboxtest