How to add values from state to array in react app?

Question

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;

You can use a ref for this, or state if you need the UI to update when arr is updated. — Nick Parsons
– Nick Parsons, Commented May 3, 2022 at 10:32
@NickParsons, apologies if this is a rather dumb question: how could one use ref in this context? I understand using a state variable to hold arr will do the trick; but, couldn't quite figure-out (for myself) how ref would help solve. — jsN00b
– jsN00b, Commented May 3, 2022 at 10:38
@jsN00b It would be something along the lines of const arr = useRef([]), and then instead of OP doinng arr.push(value) they could use arr.current.push(value) :) — Nick Parsons
– Nick Parsons, Commented May 3, 2022 at 10:42
@NickParsons Thanks, It works. If I want to assign it a new variable like this let copyValue = value, then what will be correct approach. — i_am_learning
– i_am_learning, Commented May 3, 2022 at 11:02
@i_am_learning You can set the value of the ref by updating the .current value: arr.current = value if that is what you're after? — Nick Parsons
– Nick Parsons, Commented May 3, 2022 at 11:10

Nick Vu · Accepted Answer · 2022-05-03 11:00:00Z

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;

Viral Patel · Accepted Answer · 2022-05-04 04:49:46Z

1

For this you have 2 ways:

Lifting arr variable before component

let arr = [];
function App() {
  const [value, setValue] = useState(null);
  ...
}
export default App;

Using a new state

function App() {  
  ...
  const [newArrValue, setnewArrValue] = useState([]);

  const addToArr = () => {
    ...    
    newArrValue.push(value);
    setnewArrValue(newArrValue);
    console.log(newArrValue); 
  };
  ...
}
export default App;

answered May 4, 2022 at 4:49

Viral Patel

1,1166 silver badges7 bronze badges

Comments

Luhaib-j · Accepted Answer · 2022-08-28 21:47:20Z

0

Using the useState, you can try this:

var [array, setArray] = useState(["a", "b"]);
const fun = () => {
    setArray((oldArray) => [...oldArray, "c"])
}
fun()

answered Aug 28, 2022 at 21:47

Luhaib-j

898 bronze badges

Collectives™ on Stack Overflow

How to add values from state to array in react app?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related