Quiero un valor prop dinámico para reaccionar. Ya tengo una lista de Frutas, pero mi valor de utilería debería ser Frutas[0] + 'prop'
Por ejemplo: ManzanasProp
índice.js
const ApplesProp = { Name: "Green", Age: 34 } const Fruits = ["Apples", "Pears", "Oranges"] <App prop={dynamic-fruit+'Prop'} />Intentó
<App prop={Fruits[0]+'Prop'}/>pero esto da como resultado pasar la cadena: 'ApplesProp', no el objeto ApplesProp (es decir, Nombre: Verde, Edad: 34).
Fruits[0]+'Prop'Agregar una cadena a una cadena devuelve una cadena.
Para lograr lo que necesita, puede crear un objeto con frutas como claves y accesorios como valores:
const fruitVsProps = { Apples: ApplesProp // add more as you like } <App prop={fruitVsProps[Fruits[0]]} />hay dos maneras en que puedes hacerlo. 1. Mejor manera de usar array.map() y luego pasar a sus accesorios.
let Fruits = ["Apples", "Pears", "Oranges"]; <ff> {Fruits.map((item)=>{<App props={item} /> })} </ff>2.segunda forma en que puede usar una plantilla literal
Crea un objeto y agrega tu objeto en ese
const props = { ApplesProp: { Name: "Green", Age: 34 } } const Fruits = ["Apples", "Pears", "Oranges"] console.log(props[Fruits[0]+'Prop'])y ahora podrías usarlo como
<App prop={props[Fruits[0]+'Prop']} />