Quiero hacer algo como un carrusel de texto (no en un bucle infinito), tengo mis datos almacenados en una matriz, para luego mostrarlos uno por uno, así que ahora quiero crear un botón que me permita moverme por la matriz. , pero no encuentro el camino, alguna solución?
.jsx
import React from 'react' import './CambioMesPeriodo.css'; import { useState } from "react"; export default function CambioMesPeriodo() { const slidesArray = [ {id: 1, Sup: 'Texto Superior 1', Inf: 'Texto Inferior 1'}, {id: 2, Sup: 'Texto Superior 2', Inf: 'Texto Inferior 2'}, {id: 3, Sup: 'Texto Superior 3', Inf: 'Texto Inferior 3'} ] const [slide] = useState(slidesArray); var array = 1; const values = slidesArray.map(object => object.id) let validSlide = slide.filter(slides => slides.id === (values,array)) return ( <div className="slideshow-container"> <div> <p> {validSlide[0].Sup} </p> <p> {validSlide[0].Inf} </p> </div> {/* <div> {values.map(name => <h2>{name}</h2>)} </div> */} <button >Adelante</button> </div> )}.css
/* Slideshow container */ .slideshow-container { position: relative; background: #898989; border-radius: 10px; width: 310px; height: 65px;}En la web. ingrese la descripción de la imagen aquí
A continuación se presenta una posible forma de lograr el objetivo deseado.
Fragmento de código
const { useState } = React; function CambioMesPeriodo() { const slidesArray = [{ id: 1, Sup: 'Texto Superior 1', Inf: 'Texto Inferior 1' }, { id: 2, Sup: 'Texto Superior 2', Inf: 'Texto Inferior 2' }, { id: 3, Sup: 'Texto Superior 3', Inf: 'Texto Inferior 3' } ] const [slide] = useState(slidesArray); const [idx, setIdx] = useState(0); // set-up "idx" as 0 initially // this "idx" is used to index the "validSlide" array var array = 1; const values = slidesArray.map(object => object.id) // unsure of what below line aims to achieve & hence commented-out // let validSlide = slide.filter(slides => slides.id === (values, array)) // for now, let "validSlide" be same as "slide" let validSlide = slide; return ( <div className="slideshow-container"> <div> <p> {validSlide[idx].Sup} </p> <p> {validSlide[idx].Inf} </p> </div> <button onClick={ // update the "idx" to next slide or back to zero (if at end) () => setIdx( prev => ( (prev + 1) % validSlide.length ) ) } > Adelante </button> </div> ) }; ReactDOM.render( <div> DEMO <CambioMesPeriodo /> </div>, document.getElementById("rd") ); .slideshow-container { position: relative; background: #898989; border-radius: 10px; width: 310px; height: 65px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="rd" />Explicación
Se agregaron comentarios en línea al fragmento anterior.
PD: si desea agregar valor a la comunidad stackoverflow,
Por favor considere leer: Qué hacer cuando mi pregunta es respondida ¡Gracias!
¿Qué tal algo simple, como lo siguiente en el archivo .js?
import React, { useState } from 'react'; //Take the button from your favorite library import { Button } from '@mantine/core'; export default function CambioMesPeriodo() { const slidesArray = [ { id: 1, Sup: 'Texto Superior 1', Inf: 'Texto Inferior 1' }, { id: 2, Sup: 'Texto Superior 2', Inf: 'Texto Inferior 2' }, { id: 3, Sup: 'Texto Superior 3', Inf: 'Texto Inferior 3' }] const [slideId, setSlideId] = useState(0); return( <div> <p> {slidesArray[slideId].Sup} </p> <p> {slidesArray[slideId].Inf} </p> <Button value={slideId} onClick={() => setSlideId(previousValue => previousValue + 1)}></Button> </div> ); };