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

Question

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

1k views Asked by lomse At 26 December 2024 at 11:44

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>

Original Q&A

There are 2 answers

IanBussieres On 30 April 2017 at 19:57

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>
)

**GG.** · Accepted Answer · 2016-12-20 22:07:26

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>
  );
};

TechQA.

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

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in REACTJS

Related Questions in ECMASCRIPT-6

Related Questions in JSX

Popular Questions

Popular Tags

Trending Questions