I am tring to push new value to arrays but the arrays is not updating with new values. It only contains one value after push. The arr value after button click only showing one value, but I want it to have multiple values. What are multiple ways to put values into arr variable or copy value to another variable?
function App() {
const [value, setValue] = useState(null);
let arr = [];
function addToArr() {
console.log(value);
arr.push(value);
console.log(arr); // it is only showing one value
}
return (
<div>react app
<div>
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
>
</textarea>
<button onClick={addToArr}>Add</button>
</div>
</div>
);
}
export default App;
Your problem is you put let arr = []; in the component App which will be re-rendered whenever the state changes, your arr will be reset as well.
One possible fix could be moving your arr declaration out of the component App
let arr = []; //move it to the global scope
function App() {
const [value, setValue] = useState(null);
function addToArr() {
console.log(value);
arr.push(value);
console.log(arr);
}
return (
<div>react app
<div>
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
>
</textarea>
<button onClick={addToArr}>Add</button>
</div>
</div>
);
}
export default App;
If you want to keep arr internally, you can use useRef which only refers to the same object during re-renderings
import React, { useRef, useState } from 'react'
function App() {
const [value, setValue] = useState(null);
const arrRef = useRef([]);
function addToArr() {
console.log(value);
arrRef.current.push(value);
console.log(arrRef.current);
}
return (
<div>react app
<div>
<textarea
value={value}
onChange={(e) => setValue(e.target.value)}
>
</textarea>
<button onClick={addToArr}>Add</button>
</div>
</div>
);
}
export default App;
For this you have 2 ways:
let arr = [];
function App() {
const [value, setValue] = useState(null);
...
}
export default App;
function App() {
...
const [newArrValue, setnewArrValue] = useState([]);
const addToArr = () => {
...
newArrValue.push(value);
setnewArrValue(newArrValue);
console.log(newArrValue);
};
...
}
export default App;