loading...

re: Error: Your render method should have return statement VIEW POST

FULL DISCUSSION
 

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;
 

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

Code of Conduct Report abuse