I have an object that has its component inside, and i’d like to fetch the object info inside that component:
const opciones = [ //todas las opciones de los compoentes
{
id: "TAB_inicio",
texto: "Inicio",
siguiente: "TAB_prueba",
descripcionTitulo: "Bienvenido al programa de carga de Viajes",
descripcion: "Selecciona lo que quieras hacer",
icon: <FaCheckCircle />,
next: next,
contenido: <Inicio next={next} test={this} />,
botonSiguiente: "Nuevo Viaje",
},
{
id: "TAB_descripcion",
texto: "DescripciĆ³n",
siguiente: "TAB_incluido",
descripcionTitulo: "Descripcion",
descripcion: "detalles importantes",
prueba: function prueba() {
console.log(this)
},
icon: <FaBookOpen />,
next: next,
contenido: <Descripcion register={register} />,
botonSiguiente: "Siguiente",
},
]
I tried doing it by passing "this" but it doesn’t work š help please, i’m trying to understand some concepts with react.
I’m not sure how i would pass it here in the map:
<section className='col-span-12 p-5 bg-gray-100 border-b-2 border-orange-400 rounded shadow-xl md:col-span-8 lg:col-span-10 dark:border-0 dark:bg-slate-800'>
<DarkThemeSwitcher isDark={isDark} setDark={setDark} />
{opciones.map((opcion) => (
<div key={opcion.id} className={toggle === opcion.id ? "show-content" : "hide"}>
<div className='w-full pb-5 mb-4 text-left border-b-2 border-orange-400 dark:border-cyan-400'>
<h2 className='text-2xl font-semibold text-black dark:text-white'>
{opcion.descripcionTitulo}
</h2>
<span className='text-black dark:text-white'>
{opcion.descripcion}
</span>
</div>
<div>
{opcion.contenido}
</div>
</div>
))}
I have opcion.contenido to display the component but i want to pass some props which i can’t do because it doesn’t look like <Component … /> it’s just {opcion.contenido}
2
Answers
The below solution may help you
yes we can pass the object as props, following example shows how we can achieve this.