Get value returned by useState when state updates first time.
In following code : Initial value is 0 and after clicking on button value will be 1.I want to store value1 in firstValue and value2 in secondValue and these values must be immutable.
function App() {
const [count, setCount] = React.useState(0);
// const firstValue =
// const secondValue =
return <button onClick={() => setCount(count+1)}> value {count}</button>;
}
ReactDOM.render(<App count={0}/>, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>Value will be stored only first and second click of button and these values must be immutable.
Expected Output
firstValue = value1
secondValue = value2
Perhaps another state variable can be responsible for this part?
const MAX = 2
function App() {
const [count, setCount] = React.useState(0);
const [values, setValues] = React.useState([]);
function onClick () {
if (count < MAX) {
setValues([...values, count])
}
setCount(count+1)
}
const [firstValue, secondValue] = values
return (
<div>
<button onClick={onClick}> value {count}</button>
<p>first value: {firstValue}</p>
<p>second value: {secondValue}</p>
</div>
)
}
ReactDOM.render(<App count={0}/>, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>Assuming value1 is count's previous state, and value2 is count's current state.
function App() {
const [count, setCount] = React.useState(0);
//Initialize the variables
let firstValue = count;
let secondValue = count;
return (
<button
onClick={() => {
firstValue = secondValue; // set first value equal to previous count value
secondValue = count + 1; // set second value equal to new count value
setCount(count + 1); // update the state
}}
>
value {count}
</button>
);
}
useRef function App() {
const [count, setCount] = React.useState(0);
const values = React.useRef({});
const updateValue = () => {
setCount(count+1);
// get previous values using spread, and then add the dynamic using square brackets
values.current = {...values.current, ["value" + (count+1)]: count+1 }
}
// you may require this values.current
console.log(values.current)
return <button onClick={() => updateValue() }> value {count}</button>;
}
ReactDOM.render(<App count={0}/>, document.getElementById('root')) <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js" integrity="sha256-3vo65ZXn5pfsCfGM5H55X+SmwJHBlyNHPwRmWAPgJnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js" integrity="sha256-qVsF1ftL3vUq8RFOLwPnKimXOLo72xguDliIxeffHRc=" crossorigin="anonymous"></script>
<div id='root'></div>