Discussion on: Error: Your render method should have return statement

[Madiodio ⚡️]

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]

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