Назначьте переменную const внутри функции карты

Question

Я использую Reactivesearch и пытаюсь назначить переменную const внутри функции карты. Конкретно в .map Вроде такой:

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; доставляет мне проблемы Error states unexpected token,

Является ли это возможным?

Answer 1

Вам нужно перейти от синтаксиса выражения к синтаксису блока, используя фигурные скобки и 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>)
        })

Тем не менее, вы также можете использовать деструктуризацию, чтобы получить propertyNameи затем вы возвращаетесь к одному выражению:

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

Answer 2

Это неправильное использование функций стрелок.

Fix:

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