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 =>
{value}
) ... 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, Jan 31 '20 at 19:11
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, Jan 31 '20 at 19:15
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, Feb 01 '20 at 03:43

Max · Accepted Answer · 2020-02-01T08:09:45.047

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 :)

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, Feb 01 '20 at 03:43
Technically, everything you return in JSX expression, like array of todos in your case - it will be rendered by React. The problem with your code, was that you didn't return `
{value}
` part. And because in JS we don't have that kind of syntax, it threw. And yeah, you correct, you have to return something from JSX expression in order to render it :) — Max, Feb 01 '20 at 08:02

score 1 · Answer 2 · answered Jan 31 '20 at 19:08

1

The curly braces "{}" require a return statement. If you do not want to add a return statement simply use "()" or nothing instead. ex)

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

answered Jan 31 '20 at 19:08

Lucas Claude

331
1
7

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

2 Answers2