inline style css background in react not showing

Question

What is the problem in my code? This is a slider:

<Slider {...settings}>
            {slides.map(function(item){
                return (
                    <div key={item.id} className="item-slider" 
                        style={{background: `url(images/covers/${item.cover})`}}>
                        <div className="caption">
                            <h4>{item.topic}</h4>
                            <p>{item.title}</p>

                        </div>
                    </div>
                    )  
            })}
        </Slider>

I'm using react-slick, and I tested if the item.cover is receiving some data, and it did receive data. but when I put the data in the style it does not appear inspecting it and it does not receive any errors.

Sample: code here

Answer 1

I had the same issue, try wrapping every slide into a div like this:

<Slider {...settings}>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${House})`}} />
   </div>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${Map})`}} />
   </div>
   <div>
      <div className='slider__image' style={{'backgroundImage': `url(${NotAvailable})`}} />
   </div>
</Slider>

This way I got it working.