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.
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);