Error: Your render method should have return statement

#react #render #state

React complains about the following code with the error: Your render method should have return statement.

Could you please explain what is exactly wrong with my code inside ToDoItems.js?

ToDoItems.js

import React, { Component } from 'react';

class Kir extends Component {
  state = {
    todos: [
      {
        id: 1,
        text: 'Take out the trash',
      },
      {
        id: 2,
        text: 'Grocery shopping',
      },
      {
        id: 3,
        text: 'Clean gecko tank',
      }
    ]
  };

  render() {
    const todoItems = this.state.todos.map((todoItem, index) => {
      return (
        <div key={index}>
          <label>
            <input
              type="checkbox"
              value={todoItem.text}
            />
            {todoItem.text}
          </label>
        </div>
      );
    });
  }
}

export default todoItems;

ToDo.js

import React, { Component } from 'react';
import todoItems from './ToDoItems';

class ToDo extends Component {
  render() {
    return (
      <form>
        {todoItems}
      </form>
    );
  }
}

export default ToDo;

Top comments (3)

Madiodio ⚡️ • Jan 17 '19 • Edited

I'm guessing you're trying to export the ToDoItems component.

First change the name of your component accordingly so you can export/reuse it

// ToDoItems instead of Kir
class ToDoItems extends Component {
// rest of your code
}

then check your render method, this is no the good syntax, you're defining a function inside your render method which you should avoid at all cost. And React cannot access the return statement hence the warning.

Your render method should be:

render() {
   const todoItems = this.state.todos;
   return todoItems.map((todoItem, index) => (
     <div key={index}>
       <label className="form-check-label">
         <input type="checkbox" value={todoItem.text} />
         {todoItem.text}
       </label>
     </div>
   ));
}

Full code:

ToDoItems.js

import React, { Component } from 'react';

class ToDoItems extends Component {
  state = {
    todos: [
      {
        id: 1,
        text: 'Take out the trash',
      },
      {
        id: 2,
        text: 'Grocery shopping',
      },
      {
        id: 3,
        text: 'Clean gecko tank',
      }
    ]
  };

  render() {
   const todoItems = this.state.todos;
   return todoItems.map((todoItem, index) => (
     <div key={index}>
       <label className="form-check-label">
         <input type="checkbox" value={todoItem.text} />
         {todoItem.text}
       </label>
     </div>
   ));
 }
}

export default ToDoItems;

ToDo.js

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

class ToDo extends Component {
  render() {
    return (
      <form>
       {/* Note that ToDoItems here is a component */}
        <ToDoItems />
      </form>
    );
  }
}

export default ToDo;

Kayut • Jan 17 '19

What a great solution to my problem. Thanks a lot.

frgarciames • Jan 17 '19

I think in the file ToDoItems.js your return is inside "const todoItems = ...", so in the render method you are returning nothing. I am with mobile so sorry for the explanation.

DEV Community

Error: Your render method should have return statement

Top comments (3)

Read next

The React `useInsertionEffect` Hook

🚀 Inside the Frontend Magic of YouTube: A Deep Dive into the Architecture Powering One of the World’s Largest Platforms

Understanding about React Outlet with proper routing

E2E testing in React with Cypress