Stack Overflow Asked by Nesh on January 3, 2022
I started learning React hooks, but I am stuck with a basic behavior of checkbox
. I simply want to toggle my checkbox on click / change. Let me know what I am doing wrong here.
Code –
import React from "react";
import "./styles.css";
export default function App() {
const [checked, setChecked] = React.useState(true);
const handleChange = e => {
e.persist();
console.log(e.target.checked);
setChecked({ checked: !e.target.checked });
};
return (
<div className="App">
<div className="container">
<div className="list">
<div className="search">Search</div>
<div className="list">
<ul>
<input
type="checkbox"
checked={checked}
onChange={handleChange}
onClick={handleChange}
/>
</ul>
{JSON.stringify(checked)}
</div>
</div>
</div>
</div>
);
}
another thing you could do is add the following to the handle check
if(checked === true) {
setChecked(false)
}else {
setChecked(true)
}
Answered by kodamace on January 3, 2022
if your trying to just toggle checked or not checked, checkbox default is set you just have to return the checkbox as below, from what i can see your setting checked={checked}
<div className="App">
<div className="container">
<div className="list">
<div className="search">Search</div>
<div className="list">
<ul>
<input
type="checkbox"
/>
</ul>
{JSON.stringify(checked)}
</div>
</div>
</div>
</div>
or you could also do the following what i do sometimes, if im doing anything wrong i would love to be corrected.
const handleChange = e => {
setChecked(!checked);
};
<input
type="checkbox"
onChange={handleChange}
/>
Answered by kodamace on January 3, 2022
The main problem is you are firing the handleChange
function two times.
Using the previous state of your checked
state as:
const handleChange = e => {
e.persist();
setChecked(prevState => !prevState);
};
And also removing onChange
from your input
element as:
<input type="checkbox" checked={checked} onClick={handleChange} />
Just tested this solution and seemed to be working fine.
Answered by norbitrial on January 3, 2022
const handleChange = e => {
e.persist();
console.log(e.target.checked);
setChecked({ checked: !e.target.checked });
};
This is failing because you are setting checked
to an Object but you initialise the state with a boolean
const [checked, setChecked] = React.useState(true);
Changing it to this, should work
const handleChange = e => {
setChecked(prevValue => !prevValue);
};
Answered by user2340824 on January 3, 2022
1 Asked on January 14, 2021 by droptop
1 Asked on January 14, 2021 by int-main
1 Asked on January 14, 2021 by ecatmur
3 Asked on January 14, 2021
2 Asked on January 14, 2021 by codemaster
0 Asked on January 14, 2021 by iisnaam
2 Asked on January 13, 2021 by neha-bhosale
1 Asked on January 13, 2021 by geraltdiesocke
0 Asked on January 13, 2021 by nicojuicy
2 Asked on January 13, 2021
1 Asked on January 13, 2021 by justsomeguytn
1 Asked on January 13, 2021
2 Asked on January 13, 2021 by mroldsir
4 Asked on January 13, 2021 by matthias_buehlmann
1 Asked on January 13, 2021 by nonstopaaaa
1 Asked on January 12, 2021 by kirsten-greed
0 Asked on January 12, 2021 by senan-zedan
Get help from others!
Recent Questions
Recent Answers
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP