AnswerBun.com

Array of Images ReactJs responsive carousel

Stack Overflow Asked by ljcq 09 on January 1, 2022

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

One Answer

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.

Answered by MaxGDN on January 1, 2022

Add your own answers!

Related Questions

Why are declarations in a switch construct legal?

1  Asked on November 12, 2021 by l-s-roth

 

How do I import InvalidURL exception in praw for python?

1  Asked on November 12, 2021 by johannes-pertl

   

Place button on bottom of a div

7  Asked on November 12, 2021 by jackal

       

Javascript: using tuples as dictionary keys

4  Asked on November 12, 2021 by hasen

     

Gmail REST api batch support for getting messages

3  Asked on November 12, 2021 by dune76

   

Custom Route Doesn’t Get The Query String

2  Asked on November 12, 2021 by at-2017

       

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, MenuIva, UKBizDB, Menu Kuliner, Sharing RPP, SolveDir