Solução para Autores e Livros

Segue a solução que dei para a listagem dos autores e livros. Mostrarei apenas para autores, mas o de livros é o mesmo. Alterando apenas o campo e texto a ser exibido.

Arquivo Autores.js

import React, {Component, Fragment} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import Header from './Header';
import ListaCampo from './ListaCampo';


class Autores extends Component {
  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'
      }
    ]
  };

  render() {
    return (
      <Fragment>
        <Header />
        <div className="container mb-10">
          <h4>Nossas  autoras e autores</h4>
          <ListaCampo autores = { this.state.autores } campo = 'nome' />
        </div>
      </Fragment>
    );
  }
}

export default Autores;

Arquivos ListaCampo.js

import React, { Component } from 'react'


const Campos = props => {

  const linhas = props.autores.map((linha, index) => {

    return (
      <p key={ index }>{linha[props.campo]}</p>
    );
  });

  return (
  <div>{linhas}</div>
  );
}

class ListaCampo extends Component {
  render() {
    const { autores, campo } = this.props;

    return(
      <Campos autores = { autores } campo = { campo } />
    );
  }
}

export default ListaCampo;