Question

157

Assign a const variable inside a map function

rated 0 times [ 164] [ 7] / answers: 1 / hits: 38892 / 5 Years ago, mon, january 21, 2019, 12:00:00

I'm using Reactivesearch, and I'm trying to assign a const variable inside a map function. Specifically in the .map Like such:

onAllData(data, streamData) {



    return (

        <div className=grid>

        {

            data.map((item) => 

                const propertyName = item.productName;



                <div className=flex-container card key={item._id}>

                    <div className=content>

                        <p>{propertyName}</p>

                    </div>

                </div>

            )

        }

    );

}

const propertyName = item.productName; is giving me problem. Error states unexpected token .

Is it possible?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daja

Add To Favorites

Follow

Total Points: 407

Total Questions: 103

Total Answers: 103

Location: Ghana

Member since Sun, Mar 27, 2022

2 Years ago

daja questions

1 How to delete a file in antd Upload component

Tue, Dec 21, 21, 00:00, 2 Years ago

1 map() with async vs promise.all()

Thu, Apr 23, 20, 00:00, 4 Years ago

1 React useEffect (with []) is called every time I change page (React Router)

Fri, Oct 25, 19, 00:00, 5 Years ago

1 Detect URL change in querystring

Fri, Sep 6, 19, 00:00, 5 Years ago

1 How to query relations with Knex.js?

Tue, Jul 23, 19, 00:00, 5 Years ago

View All

answered 5 Years ago kristopher · Accepted Answer

You need to go from expression syntax to the block syntax, using braces and return:

        data.map((item) => {

            const propertyName = item.productName;



            return (<div className=flex-container card key={item._id}>

                <div className=content>

                    <p>{propertyName}</p>

                </div>

            </div>)

        })

However, you could also use destructuring to get your propertyName, and then you are back to one expression:

        data.map(({productName, _id}) =>

           <div className=flex-container card key={_id}>

                <div className=content>

                    <p>{propertyName}</p>

                </div>

            </div>

        )