CODEWITHSUNDEEP
reactjs
R Combe
R Combe

Reputation: 1

component in react js not rendering

I have a component in React which I am importing in index.js, but it is giving this error: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null

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

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">

          <h1 className="App-title">TV Series list</h1>
        </header>
        <Intro />
      </div>
    );
  }
}

export default App;

Upvotes: 0

Views: 1202

Answers (3)

Hriday Modi
Hriday Modi

Reputation: 2081

const Intro = (props) => (
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
)

OR

const Intro = (props) => {
  return (<p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>);
}

Here in your code you have used {} in arrow function body but it does not return anything, hence no element/component is rendering. You can return the value from arrow function using any of the above method. Here () assumes that the only statement in body is return statement while {} requires explicit return statement.

Probably your error statement is because Intro is one stateless component.

Upvotes: 1

logos_164
logos_164

Reputation: 786

Your code:

const Intro = (props) => {
  <p className="App-intro">
    To get started, edit <code>src/App.js</code> and save to reload
  </p>
}

Doesn't have a return statement.

If you wrap it within brackets {} then you need to have a return statement within the component. You don’t have to do this if it’s wrapped in parentheses though, because the syntax implies a return

Also, you’re not exporting Intro

Upvotes: 1

Jakob G&#246;ran Thomasson
Jakob G&#246;ran Thomasson

Reputation: 424

If your file is called index.js as you said, that's probably the error.

You have jsx in your code therefore your file must be named: index.jsx

:)

Upvotes: 0

Related Questions