CODEWITHSUNDEEP
javascriptreactjsjsxtailwind-css
Josh Haywood
Josh Haywood

Reputation: 83

Mapping causing all array elements to appear in React

I'm trying to create 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.

Here's the component:

import * as React from 'react';

//Maps element based on the number of iterations
const iterations = [1, 2, 3, 4, 5, 6];
const headings = ['text', 'text2', 'text3', 'text4', 'text5', 'text6'];
const items = iterations.map((iterations) =>
    <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: enter image description here

This is how I want it too look: enter image description here

Upvotes: 0

Views: 345

Answers (2)

Josh Haywood
Josh Haywood

Reputation: 83

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 iterations
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>
    );
};

enter image description here

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370759

While you could account for the index when iterating over the iterations to get to the corresponding item in headings - the iterations 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>
);

Upvotes: 1

Related Questions