Mapping causing all array elements to appear in React-CodePudding

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 >
        <a href="#" ><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div >
            <h6 >{headings}</h6>
            <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p>
        </div>
    </div>
);

export default function RecentReviews() {
    return (
        <div >
            <h3 >Recent Reviews</h3>

            <div >
                <>{items}</>
            </div>
        </div>
    );
};

This is what it currently looks like:

This is how I want it too look:

CodePudding user response：

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 >
        <a href="#" ><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div >
            <h6 >{heading}</h6>
            <p >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales.</p>
        </div>
    </div>
);

CodePudding user response：

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 >
        <a href="#" ><img src="./images/elden-ring-thumbnail.jpg" alt="Lorem Impsum"></img></a>
        <div >
            <h6 >{content.heading}</h6>
            <p >{content.text}</p>
        </div>
    </div>
);

export default function RecentReviews() {
    return (
        <div >
            <h3 >Recent Reviews</h3>

            <div >
                <>{items}</>
            </div>
        </div>
    );
};