Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

242
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda