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
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP