reactjs - "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.

标签： reactjscomponentses6-map

Answer 1

如果你使用花括号，这意味着你正在编写一个函数，你应该jsx在最后返回一些，但是你的代码没有返回任何jsx. 所以有效的代码是

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

并且带有圆括号的代码可以工作，因为它是写返回的简写。所以基本上用圆括号，你的代码还是这样

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

一些有效的方法：

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

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