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)