1
resposta

Falha na renderização do componente

Olá, estou tentando repetir o passo a passo, porém estou obtendo erro na renderização do componente: 'ListaDeNotas'. Alguém consegue da uma luz? rs

Main: App.js

import React from 'react'
import ListaDeNotas from './components/ListaDeNotas'

function App() {
  return (
    <section>
      <form>
          <input type="text" placeholder="Título"/>
          <textarea placeholder="Escreva sua nota"></textarea>
          <button>Cria Nota</button>
      </form>


      <ListaDeNotas/>

    </section>

  );
}

Componente : ListaDeNotas.js

import React, { Component } from "react";

export default class ListaDeNotas extends Component{

    render()
    {
        return
        (
          <ul>
            <li>
              <section>
                  <header>
                    <h3>Título</h3>
                  </header>
                  <p>Escreva sua nota</p>
              </section>
            </li>
          </ul>
        );
    }

}

Estrutura de pastas

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Retorno console

PS C:\Users\jairm\Downloads\projeto-atual> npm start npm ERR! code ENOENT npm ERR! syscall open PS C:\Users\jairm\Downloads\projeto-atual> cd .\ceepCompiled with warnings. Compiled with warnings. Failed to compile.

./src/components/ListaDeNotas.js Failed to compile.

./src/components/ListaDeNotas.js Failed to compile.

./src/components/ListaDeNotas.js Compiled with warnings. Compiled with warnings. Compiled with warnings. Compiled with warnings.

src\components\ListaDeNotas.js Line 8:9: Unreachable code no-unreachable

Search for the keywords to learn more about each warning.To ignore, add // eslint-disable-next-line to the line before.

Erro no browser

× Error: ListaDeNotas(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ▶ 19 stack frames were collapsed. Module. C:/Users/jairm/Downloads/projeto-atual/ceep/src/index.js:6 3 | import './index.css'; 4 | import App from './App'; 5 |

6 | ReactDOM.render( 7 | <React.StrictMode> 8 | 9 | </React.StrictMode>, View compiled Module../src/index.js http://localhost:3000/static/js/main.chunk.js:517:30 webpack_require C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled fn C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | } 150 | return webpack_require(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return { View compiled 1 http://localhost:3000/static/js/main.chunk.js:531:18 webpack_require C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:851 848 | 849 | webpack_require.$Refresh$.init(); 850 | try { 851 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 852 | } finally { 853 | webpack_require.$Refresh$.cleanup(moduleId); 854 | } View compiled checkDeferredModules C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] C:/Users/jairm/Downloads/projeto-atual/ceep/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:61 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.

1 resposta

Olá, Jair, tudo bem?

Eu testei seu código aqui e o problema aconteceu no return do componente ListaDeNotas:

render()
    {
        return
        (
          // Tags JSX...
        );
    }

Quando vamos usar o return no javascript, não podemos pular uma linha para digitar o que iremos retornar, pois é um caso especial em que o JS insere automaticamente um ponto e vírgula junto ao return, e nesse caso as linhas abaixo dele não são retornadas. Você pode ver sobre isso na documentação.

E no console também é possível ver o erro "ListaDeNotas(...): Nothing was returned from render. This usually means a return statement is missing.". Ou seja, realmente nada estava sendo retornado!

Você deve ter algo assim:

render()
    {
        return (
          // Tags JSX...
        );
    }

Espero ter ajudado! Se persistirem os problemas, pode nos chamar. Bons estudos :)