'autores' is not defined no-undef

Arquivo App.js

import React, { Component } from 'react';
import './App.css';

import Tabela from './Tabela';

class App extends Component {

  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 (
      <Tabela autores={autores}/>  
    );
  }
}

export default App;

Arquivo Tabela.js

import React, {Component} from '.react';

const TableHead = () =>{
    return (
        <thead>
            <tr>
                <th>Autor</th>
                <th>Titulo</th>
                <th>Preço</th>
                <th>Remover</th>
            </tr>
        </thead>
    );
}


const TableBody = props =>{
    const linhas  = props.autores.map((linha, index) => {
        return (
            <tr key={index}>
                <td>{linha.nome}</td>
                <td>{linha.titulo}</td>
                <td>{linha.preco}</td>
                <td><button>Remover</button></td>
            </tr>
        );
    });
    return (
        <tbody>
        {linhas}
</tbody>
)
}

class Tabela extends Component {

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

        return(
            <table>
                <TableHead />
                <TableBody autores={autores} />
            </table>
        );
    }

}
export default Tabela;