Tengo un problema al hacer un bucle en reaccionar JS. Quiero hacer un fondo diferente para cada elemento de acuerdo con los datos que he creado. Traté de usar el estilo en línea para hacerlo dinámico, pero no funciona. ¿Alguna sugerencia o solución al respecto?
{ 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> )) }¡Resuelto! El problema no está en el bucle sino en el control deslizante que uso. En la descripción no expliqué que estaba usando el deslizador elegante porque pensé que el problema estaba en el bucle.
Solo necesito agregar antes. el resultado es asi
<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>