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

• 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

3 Answers 3

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