CODEWITHSUNDEEP
javascriptreactjs
AndrewL
AndrewL

Reputation: 112

How to render images dynamically to React Carousel?

I'm trying to load images into React Carousel. When I .map through the array of filepaths for my images, I load all the images into one 'slide', but I need them to load into different slides.

Seen (all four pictures in one slide):

enter image description here

Wanted (note the 4 dots at bottom, indicating 4 slides. This example is just hard-coded):

enter image description here

Here's the relevant code. Item.js is the parent and CarouselImages.js is the imported function to parse. There's a lot more to these components but I pared them down to the necessary parts.

Item.js

import React from 'react';
import Carousel from 'react-elastic-carousel'
import CarouselImages from 'components/DatabaseManager/HelperFunctions/CarouselImages.js'
import {
    Col,
    Row,
    CarouselItem
} from 'reactstrap'


class Item extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            activeContent: "item",
        }
    }
..
    render() {
        return (
            <div>
                <Row>
                    <Col md="6">
                        <Carousel itemsToShow={1}>
                            <CarouselImages data={this.props.data} />
                        </Carousel>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Item;

Hard-coded Item.js that works:

...
    <Carousel itemsToShow={1}>
        <item><img src={require(`assets/img/phones/i5BlackScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5BlackScreenBack.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenFront.jpg`)} alt="phone" /></item>
        <item><img src={require(`assets/img/phones/i5WhiteScreenBack.jpg`)} alt="phone" /></item>
    </Carousel>
...

CarouselImages.js:

import React from 'react';

export default function CarouselImages({ data }) {
    return (
        data.photoPath.map((image) => {
            return <item><img src={require(`assets/img/${image}`)} alt="phone" /></item>
        })
    )
}

data prop (from API call):

{
    "photoPath": [
        "phones/i5BlackScreenFront.jpg",
        "phones/i5BlackScreenBack.jpg",
        "phones/i5WhiteScreenFront.jpg",
        "phones/i5WhiteScreenBack.jpg"
    ]
}

Upvotes: 1

Views: 5114

Answers (1)

Halmon
Halmon

Reputation: 1077

Your CarouselImages component is returning as one group which is why they are all appearing on the same slide. If you want to split it up into a separate component like this, you should change CarouselImages.js to

import React from 'react';

export default function CarouselImages({ data }) {
    return (
        <Carousel itemsToShow={1}>
        {data.photoPath.map((image) => {
            return <item><img src={require(`assets/img/${image}`)} alt="phone" /></item>}
        </Carousel>
        })
    )
}

Upvotes: 3

Related Questions