javascript - Expected an assignment or function call and instead saw an expression error - Stack Overflow

Having a slight issue with some code that I have written, I keep getting the error:

expected an assignment or function call and instead saw an expression

I have mented where the error is happening. Not sure what the issue is however. Code is as follows:

renderBody() {
    const { bookings } = this.props;
    if (bookings.length > 0) {
        return (
            Object.keys(bookings).map(e => (
                <TableBody>
                    {Object.values(bookings[e]).forEach((value) => {
                        <TableCell>{value}</TableCell>; //<-ERROR??
                    })}
                </TableBody>
            ))
        );
    }
    return null;
}

Having a slight issue with some code that I have written, I keep getting the error:

expected an assignment or function call and instead saw an expression

I have mented where the error is happening. Not sure what the issue is however. Code is as follows:

renderBody() {
    const { bookings } = this.props;
    if (bookings.length > 0) {
        return (
            Object.keys(bookings).map(e => (
                <TableBody>
                    {Object.values(bookings[e]).forEach((value) => {
                        <TableCell>{value}</TableCell>; //<-ERROR??
                    })}
                </TableBody>
            ))
        );
    }
    return null;
}

• javascript
• reactjs

Share Improve this question Follow edited Apr 18, 2018 at 14:01 Mayank Shukla 105k1919 gold badges162162 silver badges145145 bronze badges asked Apr 18, 2018 at 13:45 RazielRaziel 1,56622 gold badges1717 silver badges3636 bronze badges 3

• Are you using curlys there where you should be using parenths to return implicitly? – sesamechicken Commented Apr 18, 2018 at 13:47
• Please update your question with a minimal reproducible example demonstrating the problem, ideally a runnable one using Stack Snippets (the [<>] toolbar button). Stack Snippets support React, including JSX; here's how to do one. – T.J. Crowder Commented Apr 18, 2018 at 13:52
• Maybe not supporting a destructuring assignment? Try removing const {bookings} – Jonas Wilms Commented Apr 18, 2018 at 13:54

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Because you are not doing anything inside forEach (no assignment, no calculation), also forEach will not return anything, use map to return the TableCell for each array entry.

Eslint will throw an error, if you write a forEach loop without any operation.

Write it like this:

{Object.values(bookings[e]).map(value => (
    <TableCell>{value}</TableCell>
))}

You are just missing a closing ) :

 Object.values(bookings[e]).map(value => (
            <TableCell>{value}</TableCell>
  ))} // <--

Try to use normal for loop instead of map or forEach if you want to process some data inside the loop.

If you are returning an HTML content then you should explicitly return it.

Object.keys(bookings).map(e => {
    return (
        <TableBody>
            {Object.values(bookings[e]).forEach((value) => {
                return (
                    <TableCell>{value}</TableCell>
                )
            })}
        </TableBody>
    )
})