Reactjs: Nothing Was Returned From Render

Question

I have setup a basic react app using create-react-app and created my first component. However, the project is not able to build or render due to this error in browser window:

CountDown(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
./src/index.js
D:/ReactDev/CountDownReact/countdown/src/index.js:8

Here's my index.js file code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Bulma from 'bulma/css/bulma.css'
import App from './components/App/App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

and the App.js where I have imported the new component:

import React, {Component} from 'react';
import './App.css';
import CountDown from '../countdown/Countdown';

class App extends Component {
    render() {
        return(
            <div className="App">
                Hello React
                <CountDown/>
            </div>
        );
    }
}

export default App;

Finally, my Countdown component code:

import React from 'react';

const CountDown = (props) => {
    <section class="section">
        <div className="hero-body">
            <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                 A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                reading
                </h2>
            </div>
        </div>
    </section>
};
export default CountDown;

Do I need to also import my new component here? How do I solve this issue. Thanks.

Does this answer your question? [Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null](https://stackoverflow.com/questions/46741247/nothing-was-returned-from-render-this-usually-means-a-return-statement-is-missi) — LiaNalani, Dec 14 '20 at 17:56

score 7 · Accepted Answer · answered Aug 06 '18 at 07:36

Your Countdown component doesn't return anything, you can replace the {} with () in order to have it return.

import React from 'react';

const CountDown = (props) => (
    <section class="section">
        <div className="hero-body">
            <div class="container">
                <h1 class="title">Section</h1>
                <h2 class="subtitle">
                 A simple container to divide your page into <strong>sections</strong>, like the one you're currently
                reading
                </h2>
            </div>
        </div>
    </section>
);
export default CountDown;

That should do it.

score 2 · Answer 2 · answered Aug 06 '18 at 07:40

2

CountDown component doesn't return the JSX. You can add an explicit return statement for returning the JSX.

answered Aug 06 '18 at 07:40

Nithin Thampi

3,579
1
13
13

score 0 · Answer 3 · answered Jun 04 '21 at 14:01

0

Had the same problem with this:

function Input(props) {
return 
<input type={props.type} placeholder={props.placeholder} />
 }

Instead it had to be:

function Input(props) {
return <input type={props.type} placeholder={props.placeholder} />
 }

answered Jun 04 '21 at 14:01

Zoran Janjic

111
4

Reactjs: Nothing Was Returned From Render

3 Answers3

Linked