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

CodePudding user response：

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 !

CodePudding user response：

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>
    );
};