const Tweet = ({ tweet, checkedList, setCheckedList }) => {
const [isChecked, setChecked] = useState(false);
useEffect(() => {
checkedList === [] && setChecked(false);
}, [checkedList, isChecked]);
return (
<div className="tweet">
<h3>Name : {tweet.name} </h3>
<p>{tweet.tweet}</p>
<input
type="checkbox"
checked={isChecked}
onChange={() => {
setChecked(!isChecked);
checkedList.find((e) => e === tweet.id) === undefined
? setCheckedList([...checkedList, tweet.id])
: setCheckedList(checkedList.filter((e) => e !== tweet.id));
}}
/>
</div>
);
};
I have a tweet component that has its own state. There is an external checkedList with is basically an array of checked tweet ids.
But once I reset the checkedList = []
, I am trying to reset the checked tweets by useEffect. But can’t do it.
I want all tweets state to be unchecked. What am I doing wrong?