0
251
ViewsMapping causing all array elements to appear in React
Im trying to make a component in React more dynamic by having the headings by stored in an array and mapped each time with the html element. However with each map of the element it outputs all of the values in the headings array. I would like it so the first iteration has the first heading value then the second has the second heading and so on. Any for anyone who doesn't recognise it the messy CSS is Tailwind.
** This has been resolved **
However following on I would also like where the Lorem text is to be mapped from an array in the same way as the headings.
Heres the component:
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>
);
};
This is what it currently looks like:
This is how I want it too look:
2 answers
Answer question0
While you could account for the index when iterating over the itterations to get to the corresponding item in headings - the itterations variable looks completely superfluous since it's not really used. Map over the headings instead.
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
I implemented both a heading and a message by creating a json objects array and then mapping that
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>
);
};
