Props not being passed or rendered-CodePudding

Hello guys I started learning about react, I'm trying to pass the props from one component to another but nothing is being rendered (or console.logged for that matter).

I would more than appreciate your help

Users component

export class Users extends React.Component {
  render() {
    const { name } = this.props.user;

    return (
      <div>
        <h1>{name}</h1>
      </div>
    );
  }
}

import { Users } from './users.jsx';

export class WhoWatch extends React.Component {
  state = {
    users: [
      { id: 1, name: 'Choo', series: ['Batman', 'Water'] },
      { id: 2, name: 'Sho', series: ['Boo', 'Too'] },
      { id: 3, name: "Cel'", series: ['Shoo', 'Rima'] },
    ],
  };

  // componentDidMount() {}

  render() {
    const { users } = this.state;
    return (
      <div>
        {users.map((user, index) => {
          <div>
            <Users user={user} key={index} />;
          </div>;
        })}
      </div>
    );
  }
}

CodePudding user response：

name doesn't have a property called name:

const { name } = this.props.name;

Either deconstruct props:

const { name } = this.props;

Or use the property directly without deconstructing:

const name = this.props.name;

Edit: It looks like you're confusing a "user" and a "name" in a variety of ways. Look at what you're passing to the component:

<Users user={user.name} />

Do you want to pass the user or do you want to pass the name? The component currently expects a prop called name, so pass that:

<Users name={user.name} />

Alternatively, you can pass the whole user:

<Users user={user} />

And then in the component deconstruct the user prop:

const { name } = this.props.user;

Overall it's just a matter of making sure what you're passing and what you're expecting are the same thing. You might start looking into TypeScript to help enforce this at design time as well.

CodePudding user response：

WhoWatch.js

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

class WhoWatch extends Component {
  state = {
    users: [
      { id: 1, name: 'Choo', series: ['Batman', 'Water'] },
      { id: 2, name: 'Sho', series: ['Boo', 'Too'] },
      { id: 3, name: "Cel'", series: ['Shoo', 'Rima'] },
    ],
  };

  render() {

    return (
      <div>
        {this.state.users.map((item) => {
            return <Users user={item} />;
        })}
      </div>
    );
  }
}

export default WhoWatch;

Users.js

import React, { Component } from 'react';

class Users extends Component {

  constructor(props){
    super(props);
    console.log(props);
  }
  
  render() {
    const { name } = this.props.user;

    return (
      <div>
        <h1>{name}</h1>
      </div>
    );
  }
}

export default Users;

Output:

CodePudding user response：

In the WhoWatch component you pass the user name as value of user props on the User component not the user object it self.

 <Users user={user.name} />;

In the Users component you are trying to getting the name by destructuring the user prop which is not an object but a string.

You should just pass the entire User object instead of just the name attribute. As that is the the purpose of that component you should pass the user object like this

 <Users user={user} />;

And this will solve automatically your issue and as you are in a map every item must have a key property like this

return (
  <div>
    {users.map((user, index) => {
      <div>
        <Users user={user} key={index}/>;
      </div>;
    })}
  </div>
);