Quiero representar las pestañas que almacené en una matriz y configurar la primera pestaña de la matriz como predeterminada.
Sin usar una matriz, se vería así:
<Tab name={"first tab"} default /> <Tab name={"second tab"} />Pero ahora que estoy usando una matriz y mapeándola, me pregunto cómo puedo establecer el atributo predeterminado para la primera pestaña.
Así es como se ve la matriz:
const tabs = [ { name: "first tab", }, { name: "second tab", }]Esta es mi función de mapa:
{tabs.map(tab => ( <Tab name={tab.name} /> )}map pasa su devolución de llamada al índice de la entrada como el segundo argumento, entonces:
{tabs.map((tab, index) => ( <Tab key={tab.name} name={tab.name} default={index === 0} /> )} Tenga en cuenta que también he agregado una key , ya que la necesita cada vez que le da una matriz a React.
El segundo argumento de la devolución de llamada que pasa al map es el índice.
El primer elemento tendrá un índice de 0 (que es falso).
Así que captura eso y luego puedes simplemente: default={!index}
Use el índice de matriz, la pestaña predeterminada sería el índice 0, o todos los índices verdaderos no serían predeterminados.
{tabs.map((tab, i) => ( <Tab key={tab.name} default={!i} name={tab.name} /> )}