React Multiple instances of same component receive different data

Question

I have a view where I need to render the same component multiple times and maintain a specific order.

The component <LargeImageContent /> is the component to be rendered multiple times.

Please see my data structure where data is managed within state - this is just a prototype so this works for now.

My initial thought on rendering multiple instances of the same component is to .map() through the data however, this will render the component one after another.

I need the components to receive the correct data for each and maintain the structure seen below.

Here is my layout container:

export default class Layout extends Component {
    state = {
        data: {
            largeImageObjs: [
                {
                    obj1: {
                        image: '',
                        heading: 'Hi there',
                        text: 'Perpetua efficiantur in quo, vix cu stet denique repudiandae, sonet zril te usu.',
                        btnLabel: 'Shop now'
                    },
                    obj2: {
                        image: '',
                        heading: 'Different Heading',
                        text: 'Efficiantur in quo, vix cu stet denique repudiandae, sonet zril te usu.',
                        btnLabel: 'Order now'
                    }
                }
            ]
        }
    }

    render() {
        return (
            <div className="layout-wrap">
                <Header />
                <LargeImageContent data={this.state.data} />
                <SmallPanelContent />
                <FourColContent />
                <LargeImageContent data={this.state.data} />
                <SmallPanelContent />
                <GridCarousel />
                <LargeImageContent data={this.state.data} />
                <LargeImageContent data={this.state.data} />
                <LargeImageContent data={this.state.data} />
                <Footer />
            </div>
        )
    }
}

Here is the LargImageContent component:

import React, {Component} from 'react';

import Button from '../Button';

import './index.scss';

export default class LargeImageContent extends Component {
    render() {
        const { data } = this.props;
        return (
            <div className="large-image-content-wrap">
                <div className="large-image-content">
                    <div className="large-image-content-body">
                        <h2>{data.heading}</h2>
                        <p>{data.text}</p>
                        <Button theme="button-primary" label={data.btnLabel} icon={'/svg/icons/arrow-right.svg'} />
                    </div>
                </div>
            </div>
        )
    }
}

Answer 1

With the data as you modeled it and use it in your LargeImageContent Component you should do this:

        <div className="layout-wrap">
            <Header />
            <LargeImageContent data={this.state.data.largeImageObjs[0].obj1} />
            <SmallPanelContent />
            <FourColContent />
            <LargeImageContent data={this.state.data.largeImageObjs[0].obj2} />
            <SmallPanelContent />
            <GridCarousel />
              ...
            <Footer />
        </div>