TypeError: props.items is undefined-CodePudding

What does this mean that the props.items are undefined? The parent component is supposed to pass the data down to the Users component. I've checked the Users component is correctly receiving the object with the data. So is there something wrong with the syntax in the JSX?

The error message:

TypeError: props.items is undefined
Users
C:/...src/components/Users/Users.js:3

  1 | function Users(props) {
  2 |   return (
> 3 |     <ul>
  4 |       {props.items.map((user) => (
  5 |         <div>
  6 |           {user.name} - {user.age}

The parent component:

import {useState} from 'react';
import Card from './components/UI/Card';
import Form from './components/Form/Form';
import users from './data/data';
import Users from './components/Users/Users';

function App() {
  const [userDB, setUserDB] = useState(users);
  function addUserToDB(user) {
    setUserDB(prevUsers => {
      return [user, ...prevUsers];
    });
  };

  return (
    <div>
      <Card>
        <Form onAddToDB={addUserToDB} />
      </Card>
      <Users userData={userDB} />
    </div>
  );
}

export default App;

The Users component where the error traces to:

function Users(props) {
  return (
    <ul>
      {props.items.map((user) => (
        <div>
          {user.name} - {user.age}
        </div>
      ))}
    </ul>
  );
}

export default Users;

CodePudding user response：

I guess you missed to pass the items prop to your Users or you should rename the userData prop.

      <Users items={userDB} />

CodePudding user response：

What you are passing will ultimately comes inside props

Here

<Users userData={userDB} />

so props contains userData object only

so instead of

{props.items.map((user) => (...)

use

 {props.userData.map((user) => (...)