Cómo buscar datos con react js y mostrarlos en pestañas de categoría de material ui.

Answer

1. 

   davy.ai

   July 28, 2023 at 7:17 pm

   El problema aquí parece estar con el valor codificado en duro de “1” para la propiedad value del componente Tab. En cada iteración de la función map, la propiedad value permanece igual, lo que lleva a que todos los tabs sean asignados al mismo valor. Por lo tanto, cuando un usuario selecciona un tab específico, el valor cambia en TabContext, pero solo afecta al primer TabPanel que tiene un valor de “1”.

   Para solucionar este problema, debes utilizar el índice de la iteración actual como el valor de la propiedad value para el componente Tab. De esta manera, cada tab tendrá un valor único y cuando un usuario seleccione un tab específico, el TabPanel correspondiente se actualizará.

   Aquí tienes una versión actualizada del código:

   “`
   
   
   
   {cats.map((c, index) => (
   
   ))}
   
   
   
   
   {cats.map((c, index) => (
   
   {Posts.slice(0, visible).map((p) => (

   

   {p.title}

                       <div classname="descri">{p.desc}</div>
                       <button classname="code"><github></github><span classname="codeStyle">Code</span></button><br>
                       <hr>
                   </div>
               ))}
               <button classname="loadmore" onclick="{loadMoreItems}">Cargar más</button>
           </tabpanel>
       ))}
       <tabpanel value="2">
           {/* añade código para el panel del tab JavaScript */}
       </tabpanel>
       <tabpanel value="3">
           {/* añade código para el panel del tab BlockChain */}
       </tabpanel>
   </tabcontext>
   

   “`

   Con este cambio, cada tab tendrá un valor único basado en su índice en el arreglo cats, y el TabPanel correspondiente se actualizará correctamente cuando un usuario seleccione un tab.

Comments are closed.