How can I make my function receive an array of objects and then use it?-CodePudding

I have a function that creates a text carousel type component, and I want it to receive an array when the function is called, but when I try to copy it inside the function it doesn't work, is there any solution?

in the .jsx I later use that array for some variables and functions, but I think that the way i'm copying the array is incorrect

.jsx

import React from 'react'
import './CambioMesPeriodo.css';
import { useState } from "react";
import { MdArrowBackIos } from 'react-icons/md';
import { MdArrowForwardIos } from 'react-icons/md';

export default function CambioMesPeriodo(dataSupInf) {

  

const slidesArray =  dataSupInf /* [
  {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 [id, setId] = useState(1);

  const values = slidesArray.length;

  let validSlide = slidesArray.filter(slides => slides.id === (id))


  return (

   
    
    <div className="slideshow-container">  



        <div> 
        <button className='back' onClick={() => setId(id !== 1 ? id-1 : id) } > <MdArrowBackIos> </MdArrowBackIos> </button>
        </div>

        

        <div className='Bloque de Texto'>
        <div className='textSup'> {validSlide[0].Sup} </div>
        <div className='textInf'> {validSlide[0].Inf} </div>
        </div>
        
        <div>
        <button className='next' onClick={() => setId(id < values ? id 1 : id)} > <MdArrowForwardIos> </MdArrowForwardIos> </button>
        </div>
        

        

   </div>


  )


}

.css

/* Slideshow container */
.slideshow-container {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content:space-between;
  background: #898989;
  border-radius: 10px;
  width: 310px;
  height: 65px;
}

.back {
  position: relative;
  width: 24px;
  height: 16px;
}

.next {
  position: relative;
  width: 24px;
  height: 16px;
}

.textSup{
width: 208px;
height: 39px;
font-family: 'Dosis';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 23px;

align-items: center;
text-align: center;
color: #FFFFFF;}

.textInf{
  width: 208px;
  height: 26px;
  
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  align-items: center;
  text-align: center;
  letter-spacing: 0.105em;
  color: #FFFFFF;

  
  background: #1B4858;
  border-radius: 10px 10px 0px 0px;
}

app.jsx

import React from 'react'
import { CambioMesPeriodo }  from '../../../routeIndex'

function DanielMunive() {
  return (
    <>
    <CambioMesPeriodo dataSupInf={  [ 
  {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'}   ]  } > </CambioMesPeriodo>
    </>
  )
}

export default DanielMunive

CodePudding user response：

Wrap the dataSupInf in curly brackets, this way you can use this inside the component. It is received as props.

export default function CambioMesPeriodo({dataSupInf}){}

CodePudding user response：

The problem is, that the argument in your function is an object with your props

Try this:

export default function CambioMesPeriodo(props) {

let dataSupInf = props.dataSupInf

or destructure it:

export default function CambioMesPeriodo({ dataSupInf }) {