I want to make something like a text carousel (not in an infinite loop), I have my data stored in an array, to later show them one by one, so now I want to create a button that allows me to move through the array, but I can't find the way, any solution?
.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;}
On Web. enter image description here
Presented below is one possible way to achieve the desired objective.
Code Snippet
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" />Explanation
Inline comments added to the snippet above.
PS: If you'd like to add value to stackoverflow community,
Please consider reading: What to do when my question is answered Thank you !
How about something simple, like the following in the .js file
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>
);
};