How to print the props value in console.log?-CodePudding

I am new to react I was working on simple project as my code is below I just noticed how to print the value of listItem={people} as it is passed as props in my list component i.e <List listItem={people} so I can understand it in better way that what I am getting in listItem here, I tried {console.log(listItem)} but it says undefined

    *react*
   function App() {
  const [people, setPeople] = useState(data);


  return (
    <div className="container">
      <h3>{people.length} birthdays today</h3>
      <List listItem={people} />
      
      <button onClick={() => setPeople([])}>Clear All</button>

    </div>
  );
}

export default App;

CodePudding user response：

All the parameters that you add to a component, in the component function will be sent as an object which has as key the parameter name you choose and the value that you set to it.

In the case below, I am destructuring the object that the List Component gets as a parameter.

function List({ listItem }) {
  console.log(listItem)
  
  return <div>List Component</div>
}

Here you can find more about destructuring.

CodePudding user response：

You need to retrieve the prop first, this can be done with the following code.

console.log(props.listItem)

Please refer to the React Docs