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!