Объединить в запрос API с реакцией (получить часть из jsonfile)

Question

Я делаю новое приложение, в котором все приложение складывается в мой отдел.В моей боковой панели мне нужно отобразить всю информацию, касающуюся этого приложения, включая 5 "li", которые содержат такое же расположение.В этом я получаю информацию из API.Чтобы избежать повторения кода, я сопоставляю «li» и создал файл Json, в котором есть имя, потрясающая иконка и часть запроса API, которая содержит конец запроса.{"name": "Direction métier", "icone": "far fa-user-crown", "key": "DirectionMetier"}, {"name": "Ответственное приложение", "icone": "far fa-user-shield "," key ":" ResponsableApplicatif "}, {" name ":" Responsable métier "," icone ":" far fa-user-cog "," key ":" ResponsableMetier "}, {" name ": "Domaine", "icone": "дальней сети fa-chart", "key": "PoleSI.DomainesiNom"}, {"name": "Pole SI", "icone": "дальней сети fa-chart"," key ":" PoleSI.Nom "}

Я объединяю часть моего запроса с информацией, которую я поместил в свой файл json

                <ul>
                    {
                        Data.map((data, index) => {
                        return <li key={index} className="d-flex justify-content-between">
                            <span className="label"><i class={`icon ${data.icone}`}></i>{data.name}</span>
                            <span className="value-panel">
                                { 
                                    dataDetail.records && dataDetail.records[0].`${data.key}` === null ? "" : 
                                    dataDetail.records && dataDetail.records[0].`${data.key}`
                                } 
                            </span> 
                        </li>
                    })}

Реакция возвращается ко мне с этой ошибкой«Строка 83: ошибка синтаксического анализа: неожиданный токен»