CODEWITHSUNDEEP
javascripthtmlreactjsecmascript-6jsx
lomse
lomse

Reputation: 4165

Stateless component: A valid React element (or null) must be returned

I'm new to ReactJS.

I'm trying to display Hello world using the code below, but I get 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>

Upvotes: 5

Views: 1006

Answers (2)

IanBussieres
IanBussieres

Reputation: 1006

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

Notice the absence of curly braces, it took me some time to notice they were simple parentheses.

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

Upvotes: 2

GG.
GG.

Reputation: 21844

You can't wrap a JSX element in quotes.

Change this

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

by this

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

You can also write it like this

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

Or like this

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

Upvotes: 7

Related Questions