Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

TypeError: Cannot read property 'map' of undefined

Por algum motivo não estou conseguindo realizar o map. Tudo parece ok :( Segue o código: Autores.js

import React, { Component, Fragment } from 'react'
import Header from './Header'
import DataTable from './DataTable'

class Autores extends Component {

    constructor(props) {
        super(props)

        this.state = {
            autores: [
                {
                  nome: 'Paulo',
                  livro: 'React',
                  preco: '1000'
                },
                {
                  nome: 'Daniel',
                  livro: 'Java',
                  preco: '99'
                },
                {
                  nome: 'Marcos',
                  livro: 'Design',
                  preco: '150'
                },
                {
                  nome: 'Bruno',
                  livro: 'DevOps',
                  preco: '100'
                },
                {
                  nome: 'Nico',
                  livro: 'React',
                  preco: '1000'
                }
            ],
            titulo: 'Autores'
            }
        }

    render() {
        return(
            <Fragment>
                <Header />
                <div className='container'>
                <h1>Autores</h1>
                    <DataTable dados={this.state.autores} titulo={this.state.titulo} colunas={['nome']}/>
                </div>
            </Fragment>
        )
    }

}

export default Autores
`

DataTable.js

import React from 'react'

const DataTable = props => {
    let linhas = props.dados.map(item => 
        <tr key = {item.id}>
        {props.colunas.map(coluna =>
            <td key={`${item.id}${item[coluna]}`}> {item[coluna]} </td>
        )}
        </tr>)

    return(
        <table className="centered highlight">
            <tr>
                <th>{props.titulo}</th>
            </tr>
            <tbody>
                {linhas}
            </tbody>
        </table>
    )

}
export default DataTable

Valeu!

2 respostas
solução!

Boa noite, Adriano! Como vai?

Realmente, seu código parece estar correto. Tente verificar o valor de props dentro do componente DataTable antes de vc fazer os mapeamentos! Depois, me diga aqui qual foi o resultado que vc teve ao fazer essa verificação e qual o valor que props está recebendo! Daí poderei tentar te ajudar!

Detalhe importante: é uma boa prática sempre colocar ponto e vírgula no final das instruções dos códigos JavaScript!

Qualquer coisa é só falar!

Grande abraço e bons estudos, meu aluno!

Cara, encontrei o erro. Por algum motivo eu tinha chamado o componente no arquivo app.js. Foi eu excluir do app JS e tudo funcionou perfeitamente :) Sobre a dica das boas práticas, valeu pelo toque, vou passar a seguir assim agora.

Obrigado pela ajuda!!!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software