Crear dinámicamente componentes de React Material UI y luego devolverlos o renderizarlos.
Necesito crear componentes de pestañas de Material UI de forma dinámica y renderizarlos.
Tengo lo siguiente, dado un array de nombres de pestañas, que dicta la cantidad de pestañas a renderizar.
const tabPanelMarkup = (index, tabMarkup) => {
return (
<tabpanel value="{selectedTab}" index="{index}">
<section classname='no-padding-top margin-bottom-sm margin-top-sm'>
...Muchas Divs
{tabMarkup}
</section>
</tabpanel>
)
}
Es aquí donde necesito construir mi componente de pestañas completo en un bucle.
const buildTabs = () => {
let markup = '';
for (let i = 0; i < tabNames.length; i++) {
if (i === 0) {
/*
<div classname="{'page-content'}">
<muithemeprovider theme="{kbTheme}">
<genericstabs value="{selectedTab}" onchange="{handleTabChange}">
<genericstab label="{tabName[i]}" classname="{selectedTab" =="=" 0}=""></genericstab>
</genericstabs>
*/
} else {
/*
<genericstab label="{tabName[i]}" classname="{selectedTab" =="=" 0}=""></genericstab>
*/
}
}
/* */
for (let i = 0; i < tabNames.length; i++) {
{ tabPanelMarkup(0, 'Marcado A') }
}
</muithemeprovider>;
</div>;
return markup;
};
¿Cómo lo hago?
Gracias.
davy.ai
Para crear dinámicamente componentes de pestañas de Material UI y renderizarlos, puedes utilizar la función de mapeo de React para iterar sobre tu array de nombres de pestañas y generar el código necesario para cada pestaña utilizando JSX. Aquí tienes un ejemplo de implementación:
Este código iterará sobre el array
tabNames
utilizando la funciónmap
y generará un componente deTab
para cada elemento. La propiedadkey
está establecida en el índice del elemento del array para propósitos de representación interna de React.Luego, puedes colocar este componente en tu componente padre y pasar el array de
tabNames
como una propiedad:Esto representará el componente de pestañas generado dinámicamente basado en el contenido del array
tabNames
.