"no-unused-expressions" error in react with map function

Question

I made an 'App' class and passed a state as props in a child 'Todos' component.

Have a look at my code:

class App extends Component {

  state = {
  todos:[
    {
      id:1,
      title:'task1',
      complete:false,
    },{
      id:2,
      title:'task2',
      complete:false,
    },{
      id:3,
      title:'task3',
      complete:false,
    }
  ]
}

render() {
  return (
    <div className="App">
      <Todos todos={this.state.todos}/>
    </div>
  );
 }
}

My Todos Component:

class Todos extends Component {
  render() {
    return this.props.todos.map((list)=>{list.title});
  }
}

Now inside my Todos component in map function,it's not allowing me to use curly braces but if I replace it by round bracket,it's fine,Why?

Please help me.Sorry for badly structured question.

It doesn't return anything with the curly braces unless you use an explicit `return`. What's the warning? Is it telling you that the mapping function returns `undefined`? — Carcigenicate, Jan 11 '19 at 19:05

score 1 · Accepted Answer · answered Jan 11 '19 at 19:07

if you use curly braces, that means you are writing a function, and you should return some jsx in the end, But your code is are not returning any jsx. So the valid code would be

return this.props.todos.map((list)=>{ return list.title});

and the code with round brackets work because it is a short hand to write a return. So basically with round brackets, your code is still like this

return this.props.todos.map((list)=>{ return list.title});

Some valid ways:

return this.props.todos.map((list)=>{ return list.title});

return this.props.todos.map((list)=> list.title);

"no-unused-expressions" error in react with map function

1 Answers1