Expected an assignment or function call error in ReactJS

Question

This is actually a component that I'm trying to implement in ReactJS

Here is the code snippet:

const Leaders=({leaders, isLoading, errMess})=>{
    if (isLoading) {
        return (
            <Loading />
        )
    }
    else if (errMess) {
        return (
            <h4>{errMess}</h4>
        )
    }
    else {
        return (
            leaders.map((leader) => {
                <Stagger in>
                    <Fade in>
                        <Media>
                            <Media object left src={baseUrl + leader.image} alt={leader.name} className='my-image mt-5'></Media>
                            <Media body className="ml-5 mt-0">
                                <Media heading>
                                    {leader.name}
                                </Media>
                                <p className='font-card'>{leader.designation}</p>
                                <p>{leader.description}</p>
                                <hr></hr>
                            </Media>
                        </Media>
                    </Fade>
                </Stagger>})
        )
    }
}

But I'm getting an error: Expected an assignment or function call and instead saw an expression at the return part of the else condition.

A solution to resolve this issue is much appreciated

the code seems fine, however this className='my-image mt-5' here, you should use double quotes (") — ehab, Aug 27 '20 at 14:16

score 1 · Accepted Answer · answered Aug 27 '20 at 14:18

1

It looks like your map function doesn't return anything at the end, so you have to add return to your jsx:

leaders.map((leader) => { return <Stagger in> ... // should add return

answered Aug 27 '20 at 14:18

tmhao2005

14,776
2
37
44

That solved the issue, but isn't the else condition returned as an whole? Why do I need another return inside the map function? – Nimrod Aug 27 '20 at 14:25
1

Since `Array.prototye.map` is to create a new array by loop each item and return the new one so your purpose to create the JSX for each item. If you don't return anything, it will create the list with each item is void 0 :) – tmhao2005 Aug 27 '20 at 14:28

score 1 · Answer 2 · answered Aug 27 '20 at 14:19

When you have a curly brace for an arrow function:

(leader) => {
  // ...
}

...then each item in between braces is a statement. You have an expression statement which doesn't do anything:

<Stagger in>...</Stagger>

What you want is a return statement which will become the result of the function. Otherwise, the function implicitly returns undefined, and React spits out an error if you try to render an undefined value:

return <Stagger in>...<Stagger>

...or change your arrow function to not use curly braces so you can have an expression as the body, creating an implicit return statement:

(leader) => (
  <Stagger in>
    ...
  </Stagger>
)

Expected an assignment or function call error in ReactJS

2 Answers2