How to render new value of array in react-CodePudding

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;

CodePudding user response：

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;

CodePudding user response：

You imported this for a reason, use it:

import {useState} from 'react';

React won't detect changes to any random variable you declare. So there's no reason for it to re-render the component in the code you have.

State values are fundamental to React. It's how you persist data across renders, and it's how React knows to re-render any given component. Store your data in state:

const [dataList, setDataList] = useState(["Apple","Banana"]);

And use that setter function to update the state:

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

When React sees that state was updated, it will queue a re-render of the component (in this case re-invoking the App function internally to the framework) so the new state can be used.