i am getting problem when doing loop in react JS. I want to make a different background for each item according to the data I have created. I tried to use the inline style to make it dynamic, but it doesn't work. Any suggestions or solutions regarding this?
{
main.map((item, index) => (
<a key={index} href='#' className="col-12 main-item-img" style={{backgroundImage: `url(${item.bg})`, backgroundPosition: 'center', backgroundSize: 'cover'}}>
<h2>{item.name}</h2>
<img src={item.logo} className='item-img' alt={item.region} srcSet="" />
<p>{item.desc}</p>
<div className="overlay"></div>
</a>
))
}
Solved! The problem is not in the loop but in the slick slider that I use. In the description I didn't explain that I was using the slick slider because I thought the problem was in the loop.
i just need to add before . The result is like this
<Slider {...carouselSettings} style={{ width: '100%' }}>
{
main.map((item, index) => (
<div> //add this element
<a key={index} href='#' className="col-12 main-item-img" style={{backgroundImage: `url(${item.bg})`, backgroundPosition: 'center', backgroundSize: 'cover'}}>
<h2>{item.name}</h2>
<img src={item.logo} className='item-img' alt={item.region} srcSet="" />
<p>{item.desc}</p>
<div className="overlay"></div>
</a>
</div>
))
}
</Slider>