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

HubSpot offers a powerful platform for creating user interfaces (UI) and serverless functions using React, allowing users to develop highly customizable pages and forms directly within the CRM itself.

To access terminal profile of VS Code and add commands to be run initially

Exploring React Router v7's New Framework: A Modern Take on Routing

Automating i18n Localization with AI: The Prismy Approach