Expected an assignment or function call and instead saw an expression error in react if return is not present inside map statement why?

Question

import React, { Component } from 'react'

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            {
                this.state.todo.map((value)=>{
                    <p>{value}</p>
                })
            }
            </div>
        )
    }
}

1) I know if i keep return in map it works but i want know why it failed

2)Moreover i referd to the link in for React

https://reactjs.org/docs/introducing-jsx.html#embedding-expressions-in-jsx

Now the error looks quit opposite to the explanition saying Expected an assignment or function call and instead saw an expression

3)in the react link explanation in above it is said You can put any valid JavaScript expression inside the curly braces

4) Moreover in javascript we can write like this why it is not possible in React

var a = [11,33,99]
a.map((val)=>{
console.log(val*2)
})

When you use curly braces after the arrow then you must explicitly return a value. If you do not use curly braces then it is an implicit return (meaning you don't have to write 'return'). For example you could write: this.state.todo.map(value => <p>{value}</p>) ... to make use of an implicit return. Note that an implicit return only works if you have a single line of logic returning a value. For example, if you needed to create variables or log to the console, etc. then you would need to wrap your logic in curly braces and use an explicit return. — LydiaHendriks
The reason a.map((val)=>{ console.log(val*2) }) works is because your are executing the console.log command for each iteration of the map function. You are not trying to return anything from a console.log statement. This is different from a.map((val)=>{ return console.log(val*2) }) , which would return nothing (a console.log(x) doesn't return anything). But when trying to render react components, you need to return them to the render function. — Seth Lutske
i am thinking in react we have to return something inside the render statement . That is the reason it trowed the error correct we if i was wrong — lostcoder

Max Max · Accepted Answer · 2020-01-31T19:09:16

So in your code

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            { <-- outer expression start
                this.state.todo.map((value)=>{
                    <p>{value}</p>  <-- inner expression
                })
            } <-- outer expression end
            </div>
        )
    }
}

You've got one outer expression, which wraps your JS code, it's completely correct. Your inner expression is also fine, because you use curly braces for JS code inside of JSX element. But, in order for React to render values from todo array, you must return each element from map callback, like that:

export default class DisplayTodo extends Component {
    state = {
        todo:["eat", "sleep", "repet"]
    }
    render() {
        return (
            <div>
            {
                this.state.todo.map((value)=>{
                    return <p key={value}>{value}</p>
                })
            }
            </div>
        )
    }
}

Or you can do:

{
  this.state.todo.map(value => <p key={value}>{value}</p>)
}

Note: I also added React keys to each todo in array, so you have some sort of uniqueness(good explanation about React keys)

Hope it helps :)

Expected an assignment or function call and instead saw an expression error in react if return is not present inside map statement why?

2 Answers