Getting unexpected token, expected "," while trying to map an array in React

Question

So, this is what I'm doing inside of the return:

return (
    
    <React.Fragment>
      <Styles>
      <Container>
          <Row className="rows container">
          {results.length > 0 && (  
          {results.map(result => (
            
            <Col className="columns " xs={12} sm={6} md={4} lg={3} >
              <img src={result.poster_path}  alt="movie poster" />
              </Col>
              
          ))}
          )} 
              
          
        </Row>
        </Container>
        </Styles>
    </React.Fragment>
  )

But, it's giving me the error Unexpected token, expected "," . I don't understand, especially because I have used the same syntax in another component and that's not reporting any errors.

Which line do you get this error? What is the Unexpected token? — Kao
– Kao, Commented Jan 27, 2021 at 22:05
I recommend you post the entire component / a codesandbox.io to it if its too big, also I highly recommend the usage of Pretter (autoformat code) — Twiggeh
– Twiggeh, Commented Jan 27, 2021 at 22:07

Twiggeh · Accepted Answer · 2021-01-27 22:12:53Z

2

Your return statement should look like this

return (
    <React.Fragment>
        <Styles>
            <Container>
                <Row className='rows container'>
                    {results.length > 0 &&
                        results.map(result => (
                            <Col className='columns ' xs={12} sm={6} md={4} lg={3}>
                                <img src={result.poster_path} alt='movie poster' />
                            </Col>
                        ))}
                </Row>
            </Container>
        </Styles>
    </React.Fragment>
)

(I removed the square brackets from around results.map)

Square brackets are used to inform jsx that you are going to execute javascript inside the jsx. You already started that execution on {results.length, if you add another pair of brackets inside the js execution block it will be perceived by js as you creating an object, hence the expected comma error.

answered Jan 27, 2021 at 22:12

Twiggeh

1,1701 gold badge14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zain763 Over a year ago

oh okay. Actually, I was wrapping the curly braces around map in another component and it wasn't reporting any errors.. but before map I had bootstrap's Container and Row Components so maybe that's why it wasn't reporting any errors in that component. Anyway, your solution works for me. Thanks

Collectives™ on Stack Overflow

Getting unexpected token, expected "," while trying to map an array in React

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related