Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

[Dúvida] Problemas ao passar a props no map()

Referente ao curso React: desenvolvendo com JavaScript, no capítulo Montando os times e atividade Mapeando os colaboradores

por Talis Renato da Silva Lima
| 32.7k xp | 3 posts

Estou tendo um problema na hora de criar os card, quando clico em criar card a tela fica em branco e me aparece essa messagem no console "Uncaught TypeError: props.colaboradores.map is not a function".

import Colaborador from '../Colaborador';
import './time.css';

const Time = (props) => {
    const css = {backgroundColor: props.corSecundaria}; // Uma maneira de passar para o style armazenando numa variavel

    return (
        <section className="time" style={css}>
            <h3 style={{backgroundColor: props.corDoFundo}}>{props.nome}</h3>
            <div>
                {props.colaboradores.map(colaborador => <Colaborador />)};

            </div>
        </section>
    )
}

export default Time;
4 respostas
por Vinicios Neves
| 990k xp | 1084 posts
Instrutor Tech Lead

Salve, Talis!

Consegue compartilhar o código do App.js?

O erro indica que o que chegou na prop colaboradores não é um array (por isso que ele diz que o .map não é uma função.

Então, tudo indica que está relacionado com o que vc passou pro componente na hora de chamar ele:

<Times colaboradores={PROBLEMA ESTÁ AQUI} />
por Talis Renato da Silva Lima
| 32.7k xp | 3 posts

Aqui está o código do App.js:

import { useState } from 'react';
import Banner from './componentes/Banner';
import Formulario from './componentes/Formulario';
import Time from './componentes/Time';


function App() {

  const times = [{
    nome: 'Programação',
    corPrimaria: '#57C278',
    corSecundaria: '#D9F7E9',
  },
  {
    nome: 'Front-End',
    corPrimaria: '#82CFFA',
    corSecundaria: '#E8F8FF',
  },
  {
    nome: 'Data Sciense',
    corPrimaria: '#A6D157',
    corSecundaria: '#F0F8E2',
  },
  {
    nome: 'Devops',
    corPrimaria: '#E06B69',
    corSecundaria: '#FDE7E8'
  },
  { 
    nome: 'UX e Design',
    corPrimaria: '#D86EBF',
    corSecundaria: '#FAE9F5',
  },
  {
    nome: 'Mobile',
    corPrimaria: '#FEBA05',
    corSecundaria: '#FFF5D9',
  },
  {
    nome: 'Inovação e Gestão',
    corPrimaria: '#FF8A29',
    corSecundaria: '#FFEEDF',
  }
]

  const [colaboradores, setColaboradores] = useState([]);

  const aoNovoColaboradorAdicionado = (colaborador) => {
    console.log('novo', colaborador);
    console.log('antigo', colaboradores);
    setColaboradores(...colaboradores, colaborador);
  }

  return (
    <div className="App">
      <Banner />
      <Formulario nomeDosTimes={times.map(time => time.nome)}
       aoColaboradorCadastrado={colaborador => aoNovoColaboradorAdicionado(colaborador)} />
      {times.map(time => <Time 
        key={time.nome} 
        nome={time.nome} 
        corDoFundo={time.corPrimaria} 
        corSecundaria={time.corSecundaria}
        colaboradores={colaboradores}
        />)}
    </div>
  );
}

export default App;
solução!
por Vinicios Neves
| 990k xp | 1084 posts
Instrutor Tech Lead

Achei! :)

É um detalhe pequeno, olha, ao invés de:

    setColaboradores(...colaboradores, colaborador);

Deveria ser:

    setColaboradores([...colaboradores, colaborador]);

Nesse caso, colaboradores é um array, uma lista :D

por Talis Renato da Silva Lima
| 32.7k xp | 3 posts

Nossa! que doideira eu não tinha pegado esse erro antes dessa aula kkkkkkkk. Obrigado Vinicios pela correção!