DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Kayut
Kayut

Posted on

Error: Your render method should have return statement

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)

Collapse
 
madiodio_gaye profile image
Madiodio ⚑️ • Edited on

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;
Collapse
 
kayut profile image
Kayut

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

Collapse
 
frgarciames profile image
frgarciames

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.

An Animated Guide to Node.js Event Lop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.