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;
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.
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