I have two components, a parent component and a child component. This child component is inside the parent component. Inside the child component, there's a tag that when it is clicked, a value is been stored in a separate state, Now when a button inside the parent component is clicked, the value that was stored inside a state in the child component should be printed to the console.
What I have here below
// import Checboxtest from "./Checkboxtest";
import "./styles.css";
const Child = ({ showresult, click }) => {
const [clickedvalue, setClickedValue] = useState("");
const ItemClicked = (e) => {
setClickedValue("Yes");
console.log(clickedvalue);
};
return (
<div className="App">
<h1>Checkbox Value </h1>
<span onClick={ItemClicked}>
<input type="checkbox" /> clik me
</span>
</div>
);
};
export default function Parent() {
const [clickedvalue, setClickedValue] = useState("");
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
onCick={() => {
console.log(clickedvalue);
}}
>
See checkbox value
</button>
<Child clickedvalue={clickedvalue} setClickedValue={setClickedValue} />
</div>
);
}
This is known as lifting up the state.
The clickedValue useState should be in the Parent component, then it should be passed onto the Child component <Child clickedValue={clickedValue}/>.
And as the onClick function, in this case, is in the child component you should also pass the setter method
<Child clickedValue={clickedValue} setclickedvalue={setclickedvalue}/>.
Edit #1 - After looking at the code there were multiple minor issues that I saw like in the onClick was misspelled as onCiked
Here's the modified working code
const Child = ({clickedvalue, showresult, setClickedValue }) => {
const ItemClicked = (e) => {
setClickedValue(e.target.checked);
};
return (
<div className="App">
<h1>Checkbox Value </h1>
<span onClick={ItemClicked}>
<input type="checkbox" value={clickedvalue}/> clik me
</span>
</div>
);
};
const Parent = () => {
const [clickedvalue, setClickedValue] = useState(false);
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={()=>{console.log(clickedvalue)}}>See checkbox value</button>
<Child clickedvalue={clickedvalue} setClickedValue = {setClickedValue}/>
</div>
);
}```
you should lift up the state of the Child component as follow:
const Child = ({ showresult, setClickedValue }) => {
const ItemClicked = (e) => {
setclickedvalue("Yes");
console.log(clickedvalue);
};
return (
<div className="App">
<h1>Checkbox Value </h1>
<span onClick={ItemClicked}>
<input type="checkbox" /> clik me
</span>
</div>
);
};
export default function Parent() {
const [clickedvalue, setclickedvalue] = useState("");
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 onCick={()=>{console.log(clickedvalue)}}>See checkbox value</button>
<Child setClickedValue = {setClickedValue}/>
</div>
);
}