How to render new value of array in react

August 14, 2022

Here I am getting my data from child component and trying to add it into existing array and also I am trying to display it in console using map but the moment I try to to do so I get nothing in console:

import "./App.css";
import Home from "./Components/Home";
import {useState} from 'react';

let App = () => {
  let DataList = ["Apple","Banana"];

  const newList = (data)=>{
      DataList = [...DataList,data];
  }


  return (
    <div>
      <Home newList = {newList}/>
      
      { DataList.map((val)=>(
          console.log(val)
        )) 
      }
    </div>
  )
};

export default App;

>Solution :

You need to use React hooks to make it work, then only your component will rerender

import "./App.css";
import Home from "./Components/Home";
import {useState} from 'react';

let App = () => {
 
  const [DataList, setDataList] = useState(["Apple","Banana"]);

  const newList = (data)=>{
      let temp = [...DataList,data];
      setDataList(temp);
  }


  return (
    <div>
      <Home newList = {newList}/>
      
      { DataList.map((val)=>(
          console.log(val)
        )) 
      }
    </div>
  )
};

export default App;