React State Shows False When True Is Expected [duplicate] - javascript

This question already has answers here:
Console.log() after setState() doesn't return the updated state
(2 answers)
Closed 10 months ago.
Very simple goal. When a checkbox is clicked set the state of itemOne to true initially. Then it should toggle state if clicked again. When itemOneSelected is invoked itemOne is shown as false.
The question: Why is itemOne set to false instead of true when itemOneSelected is invoked?
const [itemOne, setItemOne] = useState(false);
const itemOneSelected = () => {
setItemOne(!itemOne)
console.log(itemOne)
}
<FormControlLabel control={<Checkbox onClick => { itemOneSelected() } } />}

Remember useState is asynchronous so it will not update straight away. To get the console.log value to log your value you should add a useEffect.
useEffect(() => {
console.log(itemOne)
},[itemOne])

Related

why does this log the old value and not the new value [duplicate]

This question already has answers here:
The useState set method is not reflecting a change immediately
(15 answers)
Closed 9 months ago.
const [title,setTitle] = useState("");
const titleHandler=e => {
setTitle(e.target.value)
console.log(title)
}
Why does this code log the old value of title and not the new one. I'm new to js and react please can anyone explain this to me
it happend because when you call setTitle it doesn't update the state instantaneously but it trigger a rerender of the component with the updated state
if you do
const [title,setTitle] = useState("");
const titleHandler=e => {
setTitle(e.target.value)
console.log('updating title')
}
useEffect(() => {
console.log('title updated', title)
}, [title])
you can see for yourself

How can I update an obect to the value of another object with the same structure? [duplicate]

This question already has answers here:
Why does calling react setState method not mutate the state immediately?
(9 answers)
Closed 2 years ago.
I am trying to call a handler from a parent function with the updated state value as an argument, however, the state does not update immediately after the setSelected is called as both console logs are printing false(the initial value). After the onClick function is completed however, it gets updated.
onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected);
setSelected(!selected)
console.log("selected: ", selected)
// props.handle_card_selected(props.id, selected)
}}
useEffect(() => {
const check_border = () => {
if (selected) {
return "green"
}
return "black"
}
check_border()
}, [selected])
Two things you need to know about the state update in React:
State is updated asynchronously
In any particular render, state and props don't change; changes are only reflected after component re-renders
If you want to log the updated value of selected, put the log statement in the useEffect hook.
You can't update and log the updated value of any state variable in the same render; component will have to re-render to reflect changes due to state update.
Similarly, if you want to call a function with the updated value of selected, call the function from inside the useEffect hook.
setState is an async function which is why it doesn't update the state immediately. There is another way, i.e. pass function in setSelected, through which you can achieve the required behaviour:
onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected);
setSelected(prevSelected => {
// props.handle_card_selected(props.id, !prevSelected)
return !prevSelected
})
}}
useEffect(() => {
props.handle_card_selected(selected)
}, [selected, props.handle_card_selected])

Why is React setState hook not updating immediately? [duplicate]

This question already has answers here:
Why does calling react setState method not mutate the state immediately?
(9 answers)
Closed 2 years ago.
I am trying to call a handler from a parent function with the updated state value as an argument, however, the state does not update immediately after the setSelected is called as both console logs are printing false(the initial value). After the onClick function is completed however, it gets updated.
onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected);
setSelected(!selected)
console.log("selected: ", selected)
// props.handle_card_selected(props.id, selected)
}}
useEffect(() => {
const check_border = () => {
if (selected) {
return "green"
}
return "black"
}
check_border()
}, [selected])
Two things you need to know about the state update in React:
State is updated asynchronously
In any particular render, state and props don't change; changes are only reflected after component re-renders
If you want to log the updated value of selected, put the log statement in the useEffect hook.
You can't update and log the updated value of any state variable in the same render; component will have to re-render to reflect changes due to state update.
Similarly, if you want to call a function with the updated value of selected, call the function from inside the useEffect hook.
setState is an async function which is why it doesn't update the state immediately. There is another way, i.e. pass function in setSelected, through which you can achieve the required behaviour:
onClick={() => {
console.log("Clicked: ", props.rank, props.suit, selected);
setSelected(prevSelected => {
// props.handle_card_selected(props.id, !prevSelected)
return !prevSelected
})
}}
useEffect(() => {
props.handle_card_selected(selected)
}, [selected, props.handle_card_selected])

updating a state immediately using react hooks [duplicate]

This question already has answers here:
console log the state after using useState doesn't return the current value [duplicate]
(3 answers)
React hooks states aren't updating in log
(2 answers)
Closed 2 years ago.
I am trying to update a state after a trigger and want to use the state immediately for a function to trigger but the state is not updated immediately .
any suggestions ?
<Button
onClick={() => {
console.log(finalData) //old data
setFinalData(mutableData); // updating state
console.log(finalData) // still geeting old state
}>
</Button>
setFinalData is kind of async behaviour, so if you :
console.log(finalData) //old data
setFinalData(mutableData); // <----- async behavior
console.log(finalData) // you will never get updated finalData directly here
Solution : useEffect
useEffect(() => {
// you will get updated finalData here, each time it changes
console.log(finalData);
// you can trigger your function from here
},[finalData]);
Here is code snippet, hope this will clear your doubts :
const { useState , useEffect } = React;
const App = () => {
const [finalData,setFinalData] = useState([]);
useEffect(() => {
setTimeout(() => {
setFinalData([...finalData, "Vivek" , "Darshita"]);
console.log("finalData -----> not updated right after" ,finalData);
},2000);
},[]);
useEffect(() => {
if(finalData.length)
console.log("Final data updated , invoke your function" , finalData)
},[finalData]);
return (
<div>
{ finalData.map(user => <p>{user}</p>) }
</div>
);
}
ReactDOM.render(<App />, document.getElementById('react-root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>

my setState() doesn't set the value. How can I fix that? [duplicate]

This question already has answers here:
Why does calling react setState method not mutate the state immediately?
(9 answers)
Closed 3 years ago.
When I trying to update my state with setState it doesn't work.
sendMax = () => {
console.log('Balance',this.state.balance)
this.setState({ amount: this.state.balance })
console.log('max', this.state.amount)
}
<TouchableOpacity onPress={() => this.sendMax()}>
<Image
source={require('../../assets/maxIcon.png')}
style={styles.icons} />
</TouchableOpacity>
I'm using it inside of this how can I get this value inside it
when I console this.state.balance I get the value but I cannot set amount with this value
setState is async, if you want to listen when it's updated, use a callback
this.setState({ amount: this.state.balance }, () => console.log('max', this.state.amount));

Categories

Resources