CODEWITHSUNDEEP
javascriptreactjs
i_am_learning
i_am_learning

Reputation: 87

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

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;

Upvotes: 0

Views: 82

Answers (3)

Luhaib-j
Luhaib-j

Reputation: 99

Using the useState, you can try this:

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

Upvotes: 0

Viral Patel
Viral Patel

Reputation: 1166

For this you have 2 ways:

  1. Lifting arr variable before component
let arr = [];
function App() {
  const [value, setValue] = useState(null);
  ...
}
export default App;
  1. Using a new state
function App() {  
  ...
  const [newArrValue, setnewArrValue] = useState([]);

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

Upvotes: 1

Nick Vu
Nick Vu

Reputation: 15540

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;

Upvotes: 2

Related Questions