Estoy tratando de obtener datos usando API y hacer un bucle para imágenes de banner.
Tengo los datos. Y está funcionando bien. Aquí está el código para obtener los datos.
///Retrieving data using API const [post, setPost] = useState(null); useEffect(() => { axios.get(global.url+'api/welcome').then(response => { setPost(response.data); }); }, []); Ahora, quiero mostrar imágenes en el banner. En el primer bucle, la clase div necesita <div className="carousel-item active"> como se muestra en la imagen. Desde el segundo bucle activo, debe eliminarse para que sea como: <div className="carousel-item"> .
////Looping for banner images post[1].data.map((banner_image) => ( <div> <div className="carousel-item active"> <img src="image source here" className="d-block w-100" alt="" /> </div> </div> )) En este caso, ¿cómo usar la condición if ? Soy muy nuevo en React Js.
Gracias de antemano.
Podrías hacer condiciones en tu JSX de esta manera:
Observe el {} para className.
post[1].data.map((banner_image, index) => ( <div> <div className={"carousel-item " + index === 0 ? "active" : ""}> <img src="image source here" className="d-block w-100" alt="" /> </div> </div> ))Prueba esto
////Looping for banner images post[1].data.map((banner_image, idx) => ( <div key={idx}> <div className={`carousel-item ${idx === 0 ? "active" : ""}`}> <img src="image source here" className="d-block w-100" alt="" /> </div> </div> ))Puede usar literales de plantilla en JSX.
post[1].data.map((banner_image, index) => ( <div key={`uui-${index}`}> <div className={`carousel-item ${index === 0 ? 'active' : ''}`}> <img src="image source here" className="d-block w-100" alt="" /> </div> </div> ))