minha soucao

fala ae , eu fiz assim para mostrar os autores nao se seria valido

import React, { Component } from 'react';

const TableHead = (props) => {

    if(props.tipo==1)
    {
        return (<thead>
          <tr>
            <th>Autor</th>
            <th>Livro</th>
            <th>Preco</th>
            <th>Remover</th>
          </tr>
        </thead>)
    }
    else
    {
        return (<thead>
            <tr>
              <th>Autor</th>
            </tr>
          </thead>)
    }
}

const TableBody = (props) =>{

    const linhas = props.autores.map((linha, index)=>{
        if(props.tipo==1)
        {
        return( 
        <tr key={index}>
                <td>{linha.nome}</td>
                <td>{linha.livro}</td>
                <td>{linha.preco}</td>
                <td><button onClick={ () => props.removeAutor(index)} className="waves-effect waves-light indigo lighten-2 btn">Remover</button></td>
            </tr>
        );
        }
        else
        {
           return( <tr key={index}>
            <td>{linha.nome}</td>
        </tr>)
        }
    });

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


class Tabela extends Component{


    render(){
        const { autores, removeAutor ,tipo} = this.props;


        return(
        <table className="centered highlight">
        <TableHead tipo={tipo}/>
        <TableBody  tipo={tipo} autores={autores} removeAutor = { removeAutor }/>
        </table>
        );
    }

}
export default Tabela;

import App from './App';
import React,{Fragment} from 'react';
import Tabela from'./Tabela'
import Header from './Header'
let app = new App();


const TabelaAutores = () => {

    return(
    <Fragment>
        <Header></Header>
       <Tabela tipo={2} autores={app.state.autores}></Tabela>
    </Fragment>
    )
}


export default TabelaAutores