Erro ao utilizar o render | React parte 1: Componentes reutilizáveis para sua webapp

1
resposta

por Raiany Rufino Costa da Paz

| 259k xp | 24 posts

O erro que está dando:

./src/App.js
  Line 37:12:  Parsing error: Unexpected token, expected ";"

  35 |   };
  36 | 
> 37 |   render() {
     |            ^
  38 |     return (
  39 |       <div className="App">
  40 |         <Tabela autores = { this.state.autores }/>

O meu código abaixo:

import React from 'react';
import './App.css';
import Tabela from './Tabela';

function App() {

  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'
      },
      {
        nome: 'Nico',
        livro: 'Java',
        preco: '9999'
      }
    ],
  };

  render() {
    return (
      <div className="App">
        <Tabela autores = { this.state.autores }/>
      </div>
    );
  }

}

export default App;

1 resposta

por Lays Nogueira

| 268.5k xp | 42 posts

Analista de Sistemas

09/04/2020

Olá Raiany.

Nesse caso você está ultilizando uma function (function App() ), então é necessário trpcar o render para retur, pois o render, pelo que entendi, é usado quandl temos Class.

Então troca o seu render para:

  return (
    <div className="App">
      <Tabela autores = { this.state.autores }/>
    </div>
  );

ou troque sua function para class, assim:

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

class App extends Component {
  // restante do code aqui

}