Problema com reconhecimento dos autores

Failed to compile.

./src/App.js
  Line 34:24:  'autores' is not defined  no-undef

Essa é a resposta do prompt, porém n entendo pq o código está idêntico ao da aula:

// 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;

// 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;