I am trying to add a carousel for my products.
I have an array of url images in product.images that i want to show individually in the carousel but when i map them like this:
<AliceCarousel autoPlay autoPlayInterval="1500">
{[product.images].map((x) => (
<img src={x} alt={x} className="medium" />
))}
</AliceCarousel>
they do not show individually but all at once like so:
How would you map so as to get each url in the array individually to be shown within the carousel? Thanks
Probably OP resolved this by now, but if you have the responsive object then you can specify when to show how many elements you would like.
const responsive = {
2000: {
items: 10,
},
1200: {
items: 5,
},
800: {
items: 3,
},
0: {
items: 1,
},
};
<AliceCarousel responsive={responsive} autoPlay autoPlayInterval="1500">
{[product.images].map((x) => (
<img src={x} alt={x} className="medium" />
))}
</AliceCarousel>
In this scenario there would be 1 item from 0px width screen to 799px
Source: https://github.com/maxmarinich/react-alice-carousel
Related
So in a Reactjs class component, I have an array in my state like this:
myArray: [
{ number: 1, title: 'Users', image: '../../../assets/images/website/homepage/users.png' },
{ number: 2, title: 'Clients', image: '../../../assets/images/website/homepage/clients.png' },
{ number: 3, title: 'Admin', image: '../../../assets/images/website/homepage/admins.png' },
]
and I mapped the array this way:
{this.state.myArray.map((item, index) => (
<Box key={index} className="col-sm-12">
<img src={ item.image } className="img-fluid" alt={item.title} />
<Typography variant="h4">{item.number}</Typography>
</Box>
))}
Now, everything works fine, except the image that doesn't display, I really don't understand where I'm getting it wrong.
Note that, if I copy one of the image links directly inside the src using require method, it works. Kindly help.
You can require dynamically with proper expression:
Change image to (remove ../../../assets/images/website/homepage/ and .png):
const myArray = [
{
number: 1,
title: 'Users',
image: 'users',
},
{
number: 2,
title: 'Clients',
image: 'clients',
},
{
number: 3,
title: 'Admin',
image: 'admins',
},
]
And to render at UI (add directory path and the extension inside require):
{myArray.map((item, index) => (
<Box key={index} className="col-sm-12">
<img
src={require('../../../assets/images/website/homepage/' +
item.image +
'.png')}
className="img-fluid"
alt={item.title}
/>
<Typography variant="h4">{item.number}</Typography>
</Box>
))}
Why it works?:
Webpack can understand this expression, by generating context about directory and extension, and can load all the matching modules.
I think you are missing require.
Like:
<img src={require(item.image)} />
I am new to coding so please bear with me -
I am trying to create a dynamic gallery display, in which all the images will be taken from the database and should render in the overall layout as below.
Expected Result
I am unable to make it render in this manner instead it shows second image on repeat for 3rd image position.
Current Result
Attaching the code below which I currently have, any feedback/suggestion would be of great help to me. Thanks in advance.
Data:-
const GALLERY = [
{
qty:1, img_path:`${AMAZON_URL}/Gallery/1.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/2.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/3.jpg`,
},
{
qty:1, img_path:`${AMAZON_URL}/Gallery/4.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/5.jpg`,
},
{
qty:2, img_path:`${AMAZON_URL}/Gallery/6.jpg`,
},
]
{GALLERY.map((item, index) => (
<>
{item.qty === 1?
<Grid item xs="6" my="2" key={index}>
<img className="W100" src={item.img_path} />
</Grid>
:
<Grid item xs="6" my="2" key={index}>
<img className="W100" src={item.img_path} />
<img className="W100" src={item.img_path} />
</Grid>
}
</>
))}
Depending on image sizes you would have more success ditching the col and having the images modified inside the Grid with CSS. If the images are appropriately sized something like this could work.
<Grid>
{GALLERY.map((item, index) => (
<img className="W100" src={item.img_path} />
))}
</Grid>
img {
width:50%;
float:left;
}
I've got a bit of a problem here, hope I get help :0
well I am building a pretty little App on React and I have a navbar which includes an absolutely positioned div and two images for now... I have refs on these images and I want this navbar div to be positioned with the same top coordinates upon render...
Here is how I'm trying:
this code sets top state property to refs position:
componentDidMount() {
this.fetchApi();
this.setState({
scrolling: { top: this.first.current.offsetTop },
});
}
this is basically navbar
let { top } = this.state.scrolling;
<div className="map__left-column__logos">
<img
ref={this.first}
onClick={this.linkContainerClick}
className="img-svg"
src={pin}
alt="pingreen"
/>
<img onClick={this.linkContainerClick} src={logo} alt="logo" />
<div
ref={this.myRef}
className="link-container"
style={{ transform, top }}
>
<div className="link-container__upcurve"></div>
<div className="link-container__wrapper"></div>
<a href="#" id="container-href">
{" "}
<img
style={{
top: img1,
transition: "all linear .2s",
}}
className="img-svg"
src={chosenImg}
alt=""
/>
</a>
<div className="link-container__downcurve"></div>
</div>
</div>
</div>
and this is the linKContainerClick function trying to calculate where to scroll after I click the images
linkContainerClick = ({ target }) => {
let id = target.offsetTop;
let pixel = id - this.state.scrolling.top;
this.setState({ innerHtml: target.alt });
this.setState({
scrolling: {
...this.state.scrolling,
transform: `translateY(${pixel}px)`,
},
});
};
The problem is that on the first render of the App the link-container element is misplaced by 20 pixels... after refresh it moves to the right place
I'm trying to map through an array of objects, rendering local images, but have painfully found out that this can't be done the same way as rendering external urls, with the images not firing.
Not been able to find a solution without cheating and declaring local images declaratively - import Logo from ... - or placing the images in the public folder, which could give me cache issues down the line. I've tried image: require("") in the array but it doesn't seem to respond.
Surely this can be done dynamically? If anyone knows of a solution to the below it would really help me out.
Directory.jsx
this.state = {
categories: [
{
title: "Burgers",
image: "../../images/Burger_landing.jpeg",
id: 1
},
{
title: "Sides",
image: "../../images/Fries_main.jpeg",
id: 2
},
{
title: "Shakes",
image: "../../images/Shakes_main.jpeg",
id: 3
}
]
};
}
render() {
return (
<div className='menu__container-position'>
{this.state.categories.map(({ title, image, id }) => (
<DirectoryItem key={id} title={title} image={image} />
))}
</div>
);
}
DirectoryItem.jsx
const DirectoryItem = ({ title, image }) => {
return (
<div
className='menu__container-img'
style={{ backgroundImage: `${image}` }}
>
<h1>{title}</h1>
</div>
);
};
You should set the image URL like below
backgroundImage: `url(${image})`
Or
backgroundImage: "url("+image+")"
If images are not in a public path
backgroundImage: `url(${require(image)})`
I am trying to add an external div element(Summary Panel) on the right side of the bar chart I have implemented using react-plotly.js.
The div element would pop-up next to the chart when onClick event is fired on the chart. The panel would display the information related to the bar that was clicked. The data object based on which the bar chart is created is:
const barData = [
{ endTime: '', startTime: '', duration: 6, initiatorUsername: 'abc', title: 'abc1', aTitle: 'Manager', outcome: 'Success' },
{ endTime: '1521203405', startTime: '1520389805', duration: 7, initiatorUsername: 'defs', title: 'Senior Analyst', aTitle: 'Manager', outcome: 'Failure' }
];
I haven't seen any such example or any documentation related to add external div element to the chart. Is it possible to link chart to the external div element ?
I did attempt to implement it by doing the following:
<Plot
data={this.prepData(timelineData)}
onClick={(data) => {
this.renderCustomPanel(data);
}
onHover={(hover) => this.getHoverInfo(hover)}
type={'bar'}
layout={layout}
style={{ width: '95%' }}
/>
renderCustomPanel(e) {
const panelInfo = timelineData.map(i => `<span className="panel-info">
<span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('MMM-DD-YYYY h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('MMM-DD-YYYY h:mm:ss')}</span></span>`);
return panelInfo;
}
The onClick function does call the function but doesn't display the div element. I did try applying css styles to the element but nothing works. Firstly, how do I make a panel display onClick?
Alternate solution that comes to my mind is to make panel a separate sibling component. In that case, How do I pass the data to it such that in the description section it displays the information related to the bar that was clicked ?
class SummaryPanel extends Component {
constructor(props) {
super(props);
this.state = {
isActive: true
};
}
render() {
return (
<div className='summaryPanel'>
<Card
label='Summary panel'
heading=''
description=''
/>
<button type="button" className="close" data-dismiss="alert" aria-label="Close" onClick={() => this.hideAlert()}><span aria-hidden="true">×</span></button>
</div>
);
}
}