All geek questions in one place

Stand-alone component: a valid React (or null) element must be returned

I am new to ReactJS.

I am trying to display Hello world using the code below, but I am getting this error message:

What am I missing?

Code for App.js

 //App.js` import React from 'react'; const App = () => "<h1>Hello World!</h1>"; export default App;

Code for index.js

 //index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );

Code for /public/index.html

 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>React App</title> </head> <body> <div id="root"></div> </body> </html>
+5
source share
2 answers

You cannot wrap the JSX element in quotation marks.

Change it

 const App = () => "<h1>Hello World!</h1>";

by this

 const App = () => <h1>Hello World!</h1>;

You can also write it as

 const App = () => { return <h1>Hello World!</h1>; };

Or like that

 const App = () => { return ( <h1> Hello World! </h1> ); };
+7
source

You can also write it this way and avoid the return statement.

Note the lack of braces, it took me a while to notice that they are simple parentheses.

 const App = () => ( <h1> Hello World ! </h1> )
+2
source

Source: https://habr.com/ru/post/1261586/

More articles:


All Articles