I cant display each item in a map with a delay-CodePudding

I am trying to display my object of data in a map one at a time like a slide and it is showing the data as "object object" when returned in a div.

When I take it out the div and put it with curly brackets it displays all the data. How do I get it to display one at a time. My current hook is working as should, it is delaying each index in current the function is working, just cant connect my logic to the data and get it to display as a slide, what am I doing wrong?


   import "../assets/Main.css";
import { Link } from "react-router-dom";
import { sliderData } from "../components/sliderData";
import  { useState, useEffect } from "react";


export default function Main({ slides }) {
const [current, setCurrent] = useState(0)
const length = slides.length;
const delay = 2500;

useEffect(() =>{
  setTimeout(
    () => 
    setCurrent((current) =>
    current === length -1 ? 0: current  1),
    delay
  )
},[current]);

const nextslide = () => {
setCurrent(current === length - 1 ? 0 : current  1)

  
}

if(!Array.isArray(slides) || slides.length <= 0) {
  return null; 
}


console.log(current)


return (
    <div className="main-container">
      <div className="main-info">Otis Guess: Sofware Engineer</div>
      <div className="info" 
      >{`About Me: ${sliderData.map((slide,index)=>{
         
         return(
           <div key = {index}>            
            {index === current &&(`${slide.info}`)}
           </div>
         ) 
       
         
        
      })}`}</div>
      <div className="instructions">Discover My Work</div>
      <Link to="/portfolio">
        <div className="main-oval">click here</div>
      </Link>
    </div>
  );
}

CodePudding user response：

Well, your slide.info is an object, which is why it's returning Object object. If you'd like, you can console.log it first to see why it's doing that, or just run

${sliderData.map((slide,index)=>{
     return(
       <div key = {index}>            
        {index === current &&(`${JSON.parse(slide.info)}`)}
       </div>
     )         
  })

CodePudding user response：

Maybe a good approach is to use CSS Transitions ( https://www.w3schools.com/css/css3_transitions.asp ) with transition-delay property (https://developer.mozilla.org/es/docs/Web/CSS/transition-delay) applying to 'style' for each mapped component.

You can hide elements using opacity, as for example:

div {
    transition: opacity 1s ease-out;
    transition-delay: 2500ms # you can calculate accordingly your needs
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}