React 中的待办事项列表应用程序错误：no-unused-expressions

Question

So I am trying to make a To-Do-List App in ReactJS but I got an error:

/src/todoList.js Line 40:21: Expected an assignment or function call and instead saw an expression no-unused-expressions.

I am storing all the tasks in the state of Todolist and using a .map() which returns another component called TodoItem. I am pretty new to the react environment and have been not able to figure out the error myself.

import React from 'react';
import TodoItem from './components/todoItem';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [
                {
                    id: 1,
                    title: 'Take out the trash',
                    completed: false
                },
                {
                    id: 2,
                    title: 'Clean the room',
                    completed: false
                },
                {
                    id: 3,
                    title: 'Wash the dishes',
                    completed: false
                },
            ]
        }
    }

    render() {
       const todos = this.state.todos;
      
       
            return (
               
                   todos.map((todo) => {
                    //console.log(todo);
                    <TodoItem todo = {todo} />
                    })
               
                
            )
    
       
    }
}

export default TodoList;

The TodoItem Component. It is a separate component for each item of the Todo list.

import React from 'react';

class TodoItem extends React.Component {
    
    render() {
        console.log(this.props);
        return (
            <h3>{this.props.todo.title}</h3>
        )
    }
}

export default TodoItem;

Answer 1

The problem is here:

return (
               
                   todos.map((todo) => {
                    //console.log(todo);
                    <TodoItem todo = {todo} />
                    })

Should be:

return (<>{todos.map((todo) => <TodoItem todo = {todo} />)}</>)

Answer 2

• you do well just a tiny mistake happened in the map method you didn't return any thing so it gave you a warning that there is nothing to render so the solution is this:

import React from 'react';
import TodoItem from './components/todoItem';

class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            todos: [
                {
                    id: 1,
                    title: 'Take out the trash',
                    completed: false
                },
                {
                    id: 2,
                    title: 'Clean the room',
                    completed: false
                },
                {
                    id: 3,
                    title: 'Wash the dishes',
                    completed: false
                },
            ]
        }
    }

    render() {
       const todos = this.state.todos;
      
       
            return (
               
                   todos.map((todo) => {
                    //console.log(todo);
                    return <TodoItem todo = {todo} />
                    })
               
                
            )
    
       
    }
}

export default TodoList;

Answer 3

You should use () instead of {} in the map function like this:

 return (               
      todos.map((todo) => (            
          <TodoItem todo = {todo} />
      ))             
            
  )

Or add return statement if you want to use curly brackets like this:

return (               
      todos.map((todo) => {            
          return <TodoItem todo = {todo} />
      })             
            
  )