Assign a const variable inside a map function

Question

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?

Answer 1

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

Answer 2

That is an improper use of arrow functions.

Fix:

data.map(({productName, _id}) => (    <div className="flex-container card" key={_id}>        <div className="content">             <p>{productName}</p>         </div>    </div> );