React Map Operator

Question

I am trying to declare a variable "ratingVal" which is assigned a random no inside a map operator. I want to use the variable in the rating component and also display it on the screen. However I get an error

Parsing error: Unexpected token

What is the correct syntax for declaring a variable in this case?

renderProductsCardsList(products){ return products.map( (product, i) => let ratingVal = Math.floor(Math.random() * 5) + 1 <Rating initialRating={ratingVal} readonly></Rating> <div>{ratingVal}</div> ) }

Shubham Khatri · Accepted Answer · 2019-02-18 16:33:10Z

You can't have a declaration statement within an arrow function with an implicit return. In order to do so, use the explicit return syntax. Also, you cannot return multiple elements from within the map method. Wrap them within <React.Fragment>:

renderProductsCardsList(products){ return products.map( (product, i) => { let ratingVal = Math.floor(Math.random() * 5) + 1 return ( <React.Fragment> <Rating initialRating={ratingVal} readonly></Rating> <div>{ratingVal}</div> </React.Fragment> ) }) }

or evaluate it while assigning

renderProductsCardsList(products){ return products.map( (product, i) => <React.Fragment> <Rating initialRating={Math.floor(Math.random() * 5) + 1} readonly></Rating> <div>{ratingVal}</div> </React.Fragment> ) }

There's a closing parenthesis missing after </React.Fragment>
You can have an assignment expression in an arrow function with an implicit return. What you can't have is a declaration statement.
The top code snippet looks to achieve what I want but it still throws -> Parsing error: Unexpected token
to the "let ratingVal = Math.floor(Math.random() * 5) + 1" statement. And if I delete that line it complains about the return ( line

samb102 · Accepted Answer · 2019-02-18 16:09:48Z

Two issues :

Missing brackets after arrow => : you can only omit brackets if you do an implicit return in one line.
Floating JSX in your code : i'm not sure what you want to do. There is 2 lines of JSX floating at the end of the map method. You currently don't return anything. But i guess you want to return a Rating component.

renderProductsCardsList(products) { return products.map( (product, i) => { let ratingVal = Math.floor(Math.random() * 5) + 1 return <Rating initialRating={ratingVal} readonly></Rating> }) }

Silvio Biasiol · Accepted Answer · 2019-02-18 16:12:35Z

Use a function to return the product inside the map function:

function renderProductsCardsList(products) { let rating = () => { let ratingVal = Math.floor(Math.random() * 5) + 1 return (<> < Rating initialRating={ratingVal} readonly ></Rating > <div>{ratingVal}</div> </>) } return products.map(product => rating()) }

Collectives™ on Stack Overflow

React Map Operator

3 Answers 3

4 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Related