Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Warning no DataTable referente à key

Após construir o componente DataTable, conforme abaixo:

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'>
            <thead>
                <tr>
                    <th>{props.titulo}</th>
                </tr>
            </thead>
            <tbody>
                {linhas}
            </tbody>
        </table>
    );
}

export default DataTable;

e utiliza-lo nos componentes Autores.js e Livros.js, conforme fragmento abaixo:

// imports
class Livros extends Component {

    constructor(props) {
        super(props);

        this.state = {
            autores: [
                {
                    nome: 'Zygmunt Bauman',
                    livro: 'Modernidade Líquida',
                    preco: 'R$ 100'
                },
                {
                    nome: 'Zygmunt Bauman',
                    livro: 'Amor Líquido',
                    preco: 'R$ 100'
                },
                {
                    nome: 'Zygmunt Bauman',
                    livro: 'Vida Líquida',
                    preco: 'R$ 100'
                },
                {
                    nome: 'Zygmunt Bauman',
                    livro: 'Medo Líquido',
                    preco: 'R$ 100'
                },
                {
                    nome: 'Zygmunt Bauman',
                    livro: 'Tempos Líquidos',
                    preco: 'R$ 100'
                }
            ],
            titulo: 'Livros'
        };
    }



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

                </div>
            </Fragment>
        );
    }
}
// restante do código

é exibido no console o seguinte warning:

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `DataTable`. See https://fb.me/react-warning-keys for more information.
    in tr (at DataTable.js:5)
    in DataTable (at Livros.js:51)
    in div (at Livros.js:49)
    in Livros (created by Context.Consumer)
    in Route (at src/index.js:17)
    in Switch (at src/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:13)
1 resposta
solução!

Observei que no array de autores não havia a propriedade id, já que o array era para fim didático e ele fora substituido para se utilizar a api nas aulas seguintes. Para corrigir o warning eu adicionei o id para cada item do meu array, conforme exemplo no componente Livro.js

autores: [
                {
                    id: 1,
                    nome: 'Zygmunt Bauman',
                    livro: 'Modernidade Líquida',
                    preco: 'R$ 100'
                },
                {
                    id: 2,
                    nome: 'Zygmunt Bauman',
                    livro: 'Amor Líquido',
                    preco: 'R$ 100'
                },
                {
                    id: 3,
                    nome: 'Zygmunt Bauman',
                    livro: 'Vida Líquida',
                    preco: 'R$ 100'
                },
                {
                    id: 4,
                    nome: 'Zygmunt Bauman',
                    livro: 'Medo Líquido',
                    preco: 'R$ 100'
                },
                {
                    id: 5,
                    nome: 'Zygmunt Bauman',
                    livro: 'Tempos Líquidos',
                    preco: 'R$ 100'
                }
            ],

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