0
254
VistasMapeo que hace que todos los elementos de la matriz aparezcan en React
Estoy tratando de hacer que un componente en React sea más dinámico al tener los encabezados almacenados en una matriz y mapeados cada vez con el elemento html. Sin embargo, con cada mapa del elemento genera todos los valores en la matriz de encabezados. Me gustaría que la primera iteración tenga el primer valor de encabezado, luego la segunda tenga el segundo encabezado y así sucesivamente. Cualquiera para cualquiera que no lo reconozca, el desordenado CSS es Tailwind.
** Esto ha sido resuelto **
Sin embargo, siguiendo adelante, también me gustaría que el texto de Lorem se mapee desde una matriz de la misma manera que los encabezados.
Aquí está el componente:
import * as React from 'react'; //Maps element based on the number of itterations const itterations = [1, 2, 3, 4, 5, 6]; const headings = ['text', 'text2', 'text3', 'text4', 'text5', 'text6']; const items = itterations.map((itterations) => <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300"> <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a> <div class="md:flex md:flex-col lg:px-3"> <h6 class="font-bold lg:my-3">{headings}</h6> <p class="hidden md:block my-2 lg:my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p> </div> </div> ); export default function RecentReviews() { return ( <div class="mx-1 lg:w-[60%] lg:m-auto"> <h3 class="bg-red-500 font-bold text-white my-5 lg:my-0 px-4 py-0.5">Recent Reviews</h3> <div class="lg:grid grid-cols-3 grid-row-2"> <>{items}</> </div> </div> ); }; Así es como se ve actualmente: 
Así es como yo también quiero que se vea: 
2 Respuestas
Responde la pregunta0
Si bien podría tener en cuenta el índice al iterar sobre las itterations para llegar al elemento correspondiente en los headings , la variable de itterations parece completamente superflua ya que en realidad no se usa. Mapa sobre los headings en su lugar.
const headings = ['text', 'text2', 'text3', 'text4', 'text5', 'text6']; const items = headings.map((heading) => <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300"> <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a> <div class="md:flex md:flex-col lg:px-3"> <h6 class="font-bold lg:my-3">{heading}</h6> <p class="hidden md:block my-2 lg:my-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p> </div> </div> );0
Implementé tanto un encabezado como un mensaje al crear una matriz de objetos json y luego mapear eso
import * as React from 'react'; //Maps element based on the number of itterations const content = [{'heading': 'text1', 'text': 'text1'}, {'heading': 'text2', 'text': 'text2'}, {'heading': 'text3', 'text': 'text3'}, {'heading': 'text4', 'text': 'text4'}, {'heading': 'text5', 'text': 'text5'}, {'heading': 'text6', 'text': 'text6'},]; const items = content.map((content) => <div class="flex flex-row lg:flex-col mx-5 lg:mx-2 lg:mt-0 my-5 pb-5 items-center md:items-start lg:bg-white border-b-2 border-red-300"> <a href="#" class="w-[26%] lg:w-full mr-5 lg:mr-0 rounded-sm"><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a> <div class="md:flex md:flex-col lg:px-3"> <h6 class="font-bold lg:my-3">{content.heading}</h6> <p class="hidden md:block my-2 lg:my-0">{content.text}</p> </div> </div> ); export default function RecentReviews() { return ( <div class="mx-1 lg:w-[60%] lg:m-auto"> <h3 class="bg-red-500 font-bold text-white my-5 lg:my-0 px-4 py-0.5">Recent Reviews</h3> <div class="lg:grid grid-cols-3 grid-row-2"> <>{items}</> </div> </div> ); }; 