Array of Images ReactJs responsive carousel

Question

I am just getting started with web pages. I am trying to make a function for the react responsive carousel so I can pass an array of images and it renders depending on the number of images, I've been trying to run something like this:

Callingfun.js

import React from 'react';

import Carouselfun from '../components/Carouselfun'

import webs from '../assets/images/proj/website.JPG'
import webs1 from '../assets/images/proj/website1.JPG'
import webs2 from '../assets/images/proj/website2.JPG'


const imagess= [webs,webs1,webs2];

function WebsitePage(props) {
    return(
        <div className="g-background-pages">
            
            <Carouselfun   
                        imag={imagess}
                        />
        </div>
    );

}

export default WebsitePage;

Carouselfun.js

import React from 'react';
import {Jumbotron, Container, Row, Col, Image} from 'react-bootstrap';

import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';


function carouselfun(props){
    
    return(
        <Jumbotron>
            <Container>
                 <Row>
                    <div>
                        <div>        
                            <Carousel>
                             
                            {props.imag}.forEach(element => {
                                <div>
                                <Image src= element/>
                                </div>
                            });
                                
                            </Carousel>         
                        </div>
                    </div>
                </Row>
            </Container>
        </Jumbotron>
    )
}

export default carouselfun;

Is there something wrong in the way I am passing my arrays of Images? or does it have to be with the render function?

Thank you

it should be like this: {props.imag.map((element, index) =>

)} — Talmacel Marian Silviu, Jul 24 '20 at 17:49
I've tried that, but I get the error [ 'element' is not defined no-undef ] @TalmacelMarianSilviu — ljcq 09, Jul 24 '20 at 17:50
The second answer doesn't work either, I get [ Parsing error: JSX value should be either an expression or a quoted JSX text ] for the element part — ljcq 09, Jul 24 '20 at 17:53
sorry can you try this? {props.imag.map((element, index) => (

))} — Talmacel Marian Silviu, Jul 24 '20 at 17:54
It worked! just pass element like {element} {props.imag.map((element, index) =>

)} Thanks man! — ljcq 09, Jul 24 '20 at 17:55

score 0 · Answer 1 · answered Jul 24 '20 at 17:51

It seems that you are using array.forEach, where a array.map operation will do instead. Map will transform your array and return an array of <div><Image src={element}/> </div> (ReactNodes). Foreach wont return anything. As Talmacel notes in the comment you were missing some brackets too.

Array of Images ReactJs responsive carousel

1 Answers1