Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

234
Vistas
Props not being passed or rendered

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>
    );
  }
}

about 4 years ago · Santiago Trujillo
3 Respuestas
Responde la pregunta

0

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.

about 4 years ago · Santiago Trujillo Denunciar

0

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:

enter image description here

about 4 years ago · Santiago Trujillo Denunciar

0

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>
);
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda