I have two states in my component, I passed the 'updateStatus function', 'strikeThroughToggle function' and 'strikeThrough' state to my Child component. When i click on the button in my Child component, i want it to call the 'strikeThroughToggle function' which toggles the 'strikeThrough state' and pass the current state to my "updateStatus function". However, when i click on the button, the 'updateStatus function' gets called before my state changes, hence, using the previous state value. Please what do i need to do
function Create() {
const [users, setUsers] = useState([]);
const [strikeThrough, setStrikeThrough] = React.useState(false);
const strikeThroughToggle = () => {
setStrikeThrough(!strikeThrough);
};
const handleSubmit = (e) => {
e.preventDefault();
setUsers([...users, { id: nextId++, name, status: "false" }]);
};
const updateStatus = (id, status) => {
console.log("updateStatus called");
const index = users.findIndex((item) => item.id === id);
const newUsers = [...users];
newUsers[index] = { ...newUsers[index], status: String(status) };
setUsers(newUsers);
};
<Child strikeThrough={strikeThrough} updateStatus={updateStatus} strikeThroughToggle={strikeThroughToggle}/>
//button in Child component
<button onClick={() => {
props.strikeThroughToggle();
props.updateStatus(props.id, String(props.strikeThrough));
}}>Update </button>