Adiconando THeads nas páginas autores e livros

A solução proposta, apesar de permitir inserir quantas colunas desejar, acaba não atendendo os títulos das colunas, ou seja, não acrescenta outras colunas na tag

Para atender esta questão, modifiquei o arquivo DataTable.js 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>);

    let tHead = props.titulos.map((item) => <th>{item}</th>);
    return (
        <table className='centered highlight'>
            <thead>
                <tr>
                    {tHead}
                </tr>
            </thead>
            <tbody>
                {linhas}
            </tbody>
        </table>
    );

}
export default DataTable;

Foi criada a constante tHead recebendo o array de títulos que será passado na props.

Desta maneira, para utilizar o componente, por exemplo, na página incial, podemos chamá-lo da seguinte maneira.

<DataTable dados={this.state.autores} titulos={['Nome', 'Livro', 'Preço']} colunas={['nome','livro','preco']}/>

Ou seja, passando um array com os títulos de cada coluna, onde antes era passado somente uma string.