How can I implement a button that dynamically updates the id parameter in slide.filter in order to display various elements from an array in a REACT application?

Question

How can I implement a button that dynamically updates the id parameter in slide.filter in order to display various elements from an array in a REACT application?

I am attempting to create a text carousel that displays data from an array one at a time. I have stored the data in an array and now I want to implement a button that allows me to navigate through the array entries. However, I am facing issues finding a solution for this. Can anyone help?

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

Displayed on Web: here is the image description

javascript css arrays reactjs react-hooks

Answer 1

Answer №1

Outlined below is a potential method to accomplish the specified goal.

Code Extract

const {
  useState
} = React;

function ChangeMonthPeriod() {
  const slidesArray = [{
      id: 1,
      Top: 'Top Text 1',
      Bottom: 'Bottom Text 1'
    },

    {
      id: 2,
      Top: 'Top Text 2',
      Bottom: 'Bottom Text 2'
    },

    {
      id: 3,
      Top: 'Top Text 3',
      Bottom: 'Bottom Text 3'
    }
  ]

  const [slide] = useState(slidesArray);
  
  const [idx, setIdx] = useState(0); // initialized "idx" as 0
  // "idx" is used to index the "validSlide" array
  
  var array = 1;
  const values = slidesArray.map(object => object.id)
  // commented due to uncertain function & hence uncertainty
  // let validSlide = slide.filter(slides => slides.id === (values, array))
  
  // for now, consider "validSlide" same as "slide"
  let validSlide = slide; 

  return (
    <div className="slideshow-container">  
      <div>
        <p> {validSlide[idx].Top} </p>
        <p> {validSlide[idx].Bottom} </p>
      </div>
      <button
        onClick={           // update the "idx" to next slide or back to zero (if at end)
          () => setIdx(
            prev => (
              (prev + 1) % validSlide.length
            )
          )
        }
      >
        Forward
      </button>
     </div>
  )
};

ReactDOM.render(
  <div>
    DEMO
    <ChangeMonthPeriod />
  </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" />

Description

Clarifying notes included in the provided code snippet above.

Note: If you wish to contribute to the Stack Overflow community,

Please take a moment to read: What to do when my question is answered Thank you !

Answer 2

Outlined below is a potential method to accomplish the specified goal.

Code Extract

const {
  useState
} = React;

function ChangeMonthPeriod() {
  const slidesArray = [{
      id: 1,
      Top: 'Top Text 1',
      Bottom: 'Bottom Text 1'
    },

    {
      id: 2,
      Top: 'Top Text 2',
      Bottom: 'Bottom Text 2'
    },

    {
      id: 3,
      Top: 'Top Text 3',
      Bottom: 'Bottom Text 3'
    }
  ]

  const [slide] = useState(slidesArray);
  
  const [idx, setIdx] = useState(0); // initialized "idx" as 0
  // "idx" is used to index the "validSlide" array
  
  var array = 1;
  const values = slidesArray.map(object => object.id)
  // commented due to uncertain function & hence uncertainty
  // let validSlide = slide.filter(slides => slides.id === (values, array))
  
  // for now, consider "validSlide" same as "slide"
  let validSlide = slide; 

  return (
    <div className="slideshow-container">  
      <div>
        <p> {validSlide[idx].Top} </p>
        <p> {validSlide[idx].Bottom} </p>
      </div>
      <button
        onClick={           // update the "idx" to next slide or back to zero (if at end)
          () => setIdx(
            prev => (
              (prev + 1) % validSlide.length
            )
          )
        }
      >
        Forward
      </button>
     </div>
  )
};

ReactDOM.render(
  <div>
    DEMO
    <ChangeMonthPeriod />
  </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" />

Description

Clarifying notes included in the provided code snippet above.

Note: If you wish to contribute to the Stack Overflow community,

Please take a moment to read: What to do when my question is answered Thank you !

Answer 3

Answer №2

How about starting with a simple code snippet in the .js file like this:

import React, { useState } from 'react';
// Use your preferred library to add button functionality
import { Button } from '@mantine/core';


export default function ChangeMonthPeriod() {
    const slidesArray = [
    {
        id: 1,
        Sup: 'Top Text 1',
        Inf: 'Bottom Text 1'
    },
    {
        id: 2,
        Sup: 'Top Text 2',
        Inf: 'Bottom Text 2'
    },
    {
        id: 3,
        Sup: 'Top Text 3',
        Inf: 'Bottom Text 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>
    );
};

Answer 4

How about starting with a simple code snippet in the .js file like this:

import React, { useState } from 'react';
// Use your preferred library to add button functionality
import { Button } from '@mantine/core';


export default function ChangeMonthPeriod() {
    const slidesArray = [
    {
        id: 1,
        Sup: 'Top Text 1',
        Inf: 'Bottom Text 1'
    },
    {
        id: 2,
        Sup: 'Top Text 2',
        Inf: 'Bottom Text 2'
    },
    {
        id: 3,
        Sup: 'Top Text 3',
        Inf: 'Bottom Text 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>
    );
};

How can I implement a button that dynamically updates the id parameter in slide.filter in order to display various elements from an array in a REACT application?

Answer №1

Answer №2

Similar questions

Locating the Searchbox on Google Maps with the angular-google-maps library

Having trouble with the error "Cannot GET /" in your Angular2 and Express

Is there a way to customize the look of the close button on a Bootstrap 5 search box?

typescript unable to use module as variable in import statement

Connecting with a php anchor and hash symbol in a website URL

Tips for handling date type input to accommodate both JSON format and date format within AngularJS

How to Trigger a Google Apps Script Function from an HTML Page

Script to identify compatibility with Bootstrap 4 in Javascript

Error message: UnhandledPromiseRejectionWarning in (Node.js, Express.js, MongoDB) - TypeError occurs when trying to access an undefined 'username' property

Ways to eliminate the gap between two columns within a row, where the third column begins directly after the second one, causing a significant gap

Guide on how to modify the color of a single row within a table with just a click

How can we use vanilla JavaScript to implement an image zoom effect on mouse movement?

How can Python be used to change the positions of characters using their indices?

Showing a series of words individually on separate lines using the IN and OUT flags

Implement a top bar above the navigation bar using Bootstrap

Browser disregards backslashes in the content of pseudo elements

Unable to utilize a function within a mongoose schema

Node.js throws an error stating that it is unable to read the property 'p_nome' because it is undefined

How to ensure a table in MaterialUI always maintains full width without requiring horizontal scrolling in CSS?

The values from the form fields are not being properly transferred into the JSON object