React Error TypeError: Cannot read property 'name' of undefined

Question

I am learning to react but I am stuck in one issue. I am trying to get the array properties in my Useritem.js file

this is my User.js file

import React, { Component } from 'react'
import Useritems from './Components/Useritems';


const User = () => {
    state = {
        users: [
            { name: 'David', age: '20', Position: 'developer' },
            { name: 'Francis', age: '20', Position: 'Software Engineer' },
        ]
    }
    return (
        <div>
            {this.state.users.map(user => (
                <Useritems user={user} />
            ))}
        </div>
    );
}
export default User

And this is my Useritem.js file


import React from 'react'

const Useritems = ({ user: { name, age, job } }) => {
    return (
        <div>
            <h1>{name}</h1>
            <h2>{age}</h2>
            <h3>{job}</h3>
        </div>
    )

}

export default Useritems

But I am getting an error saying that the property name is not defined

Does this answer your question? React functional component using state — Emile Bergeron
– Emile Bergeron, Commented Feb 12, 2021 at 19:37

Flagship1442 · Accepted Answer · 2021-02-12 19:53:34Z

1

You are using a functional component (as opposed to a class component), so you cannot use this.state. Instead you need to use the hook useState to handle your state, which you can do like this:

import React, { useState } from "react";
import Useritems from "./Components/Useritems";

const initialUsers = [
  { name: "David", age: "20", Position: "developer" },
  { name: "Francis", age: "20", Position: "Software Engineer" }
];

const Users = () => {
  const [users, setUsers] = useState(initialUsers);

  return (
    <div>
      {users.map((user) => (
        <Useritems key={user.name} user={user} /> // don't forget the key, though will want to find something more unique than name!
      ))}
    </div>
  );
};

answered Feb 12, 2021 at 19:53

Flagship1442

1,7362 gold badges9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Saghar Francis Over a year ago

it is possible to achieve this without using hooks ?

Emile Bergeron Over a year ago

@SagharFrancis See Unable to use useState in class component React.js

Flagship1442 Over a year ago

No, you need to use hooks if you're using a functional component.

Emile Bergeron Over a year ago

@James OP could just use a class component if he's using an older version of React (when hooks were not available yet) or if he just doesn't want to use them at this time.

Collectives™ on Stack Overflow

React Error TypeError: Cannot read property 'name' of undefined

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related