Значение динамической опоры в реакции?

Мне нужно динамическое значение опоры для реакции. У меня уже есть список фруктов, но значение свойства должно быть Fruits[0] + ‘prop’

Например: ApplesProp

index.js

const ApplesProp = { Name: "Green", Age: 34 }
const Fruits = ["Apples", "Pears", "Oranges"]
<App prop={dynamic-fruit+'Prop'} />

Пытался

<App prop={Fruits[0]+'Prop'}/>

но это приводит к передаче строки: «ApplesProp», а не объекта ApplesProp (т. е. Name: Green, Age: 34).

— — — — — — — — Ответ 1 — — — — — — — — —

Чтобы выполнить вышеуказанную задачу, вам нужно создать объект с фруктами в качестве ключей и реквизитами в качестве значений.

const AppleProps = {Name : "Green }
const Fruits = {"Apples", "Banana"}
const FruitsAndProps = {
 Apples: AppleProps
}

— — — — — — — — Ответ 2— — — — — — — — —

Вам нужно рассмотреть возможность передачи вашей динамической строки внутри обратных кавычек => `` вместо кавычек и использовать метод eval() для преобразования вашей строки в переменную (чтобы IDE знала, что вы имеете в виду переменную, а не строку). Результат должен выглядеть так:

const ApplesProp = { Name: "Green", Age: 34 }
const Fruits = ["Apples", "Pears", "Oranges"]
console.log(eval(`${Fruits[0]}Prop`))
//the console returns an object. so passing it through props should be fine.
<App prop={eval(`${Fruits[0]}Prop`)}/>

Хотя есть более чистые способы решить эту проблему, поскольку я не хочу связываться с вашей логикой, я придумал приведенный выше код.

Если у вас есть идеи получше, пожалуйста, запишите