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
2 Asked on December 22, 2021 by dmitriy-burtsev
2 Asked on December 22, 2021 by faridavesko
2 Asked on December 22, 2021 by sao-haruka
2 Asked on December 22, 2021 by handsome
1 Asked on December 22, 2021 by user11965730
2 Asked on December 22, 2021 by bob-saggy
1 Asked on December 22, 2021 by di-zhu
1 Asked on December 22, 2021 by rizki-prastyo
1 Asked on December 22, 2021 by udo-held
2 Asked on December 22, 2021 by aiya-siddig
2 Asked on December 22, 2021
1 Asked on December 22, 2021 by user1283776
2 Asked on December 22, 2021 by asinkxcoswt
amazon web services android crashlytics elasticsearch logging
Get help from others!
Recent Questions
Recent Answers
© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP