Automatically change which element of array to display in React

Question

Using React.

If I had an array like:

[ data: 
 title: foo1
  body: bar1

 title: foo2
  body: bar2

 title: foo3
  body: bar3
]

And I wanted to display a single body and title at one time on my page and loop through these elements (have a paragraph that changes its contents routinely).

So far I specify which data I want using this:

let specificBody = this.state.data[x].body; //loop through different elements of array on timer
      let specificTitle = this.state.data[x].title;
      let specificPosted_By = this.state.data[x].posted_by;

Is there any way to increment the value of x so that I can display a different body and title? Or is there another way of achieving this aim?

All help greatly appreciated.

Yes, make x into a state, snd then periodically change x.

Keith
– Keith

2022-01-21 09:58:33 +00:00
Commented Jan 21, 2022 at 9:58 — Keith
– Keith, Commented Jan 21, 2022 at 9:58

Andreas Jagiella · Accepted Answer · 2022-01-21 10:09:09Z

1

Some pseudo code, untested:

const [index, setIndex] = useState(0)

useEffect(() => {
    const interval = setInterval(() => { /*todo reset at max value*/ setIndex(index+1) }, 10000)
    return () => clearInterval(interval)
},[])

and then use index here:

this.state.data[index].body;

answered Jan 21, 2022 at 10:09

Andreas Jagiella

1878 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Someone Special · Accepted Answer · 2022-01-21 10:11:17Z

1

This is an example of how you can use setInterval to update the active index periodically.

Your render will then display the text of the active object in the array.

const data = [{ title, body },{ title, body }, { title, body }]

const Component = () => {
  const [active, setActive] = useState(0);

  useEffect(() => {
      //This is how you use setInterval to change the active index every 5 seconds
      setInterval(() => {
         setActive( previous => {
             if (previous === data.length) {
                return 0;
             } else {
                return previous+1;
             } 

         })


      }, 5000) //Change every 10 seconds

  },[])

  return <div>{data[0].title}</div>

}

answered Jan 21, 2022 at 10:11

Someone Special

13.7k8 gold badges54 silver badges80 bronze badges

Comments

egremont of yorke · Accepted Answer · 2022-01-21 17:53:00Z

1

It looks like you're trying to accomplish two things:

Increment the specific array position
Do this automatically using a timer.

The snippet of code doesn't show what loop logic you're using, but assuming you're going to implement a setInterval inside a useEffect hook, you want to create an independent state variable for 'x' (which marks the array index on your data object).

You can then set a conditional within the useEffect hook, like this:

useEffect(() => {
const intervalId = setInterval(() => {
    if(x <= data.length-1) {
       setData(data[x])
    }
    else {
      setState({
         x = 0;
   })
};
 x++;
}, 5000);
return () => clearInterval(intervalId);
}, [data, x])

edited Jan 21, 2022 at 17:53

answered Jan 21, 2022 at 10:16

egremont of yorke

1,2318 silver badges18 bronze badges

Comments

R4ncid · Accepted Answer · 2022-01-21 10:13:05Z

0

probably a better approach is to divide it into two components, one that hold the data and has the rotation logic and another one that is just presentation

something like this

const Article = (title, body) => {
  return <div>...</div>
}

const ArticleCarousel = (data, time) => {

 const [index, setIndex] = useState(0)
 
 useEffect(() => {
  const interval = setInterval(() => {
    setIndex(i => (i + 1) % data.lenght)
}, time)
 return () => clearInterval(interval)
})

return <Article {...data[index]} />

}

answered Jan 21, 2022 at 10:13

R4ncid

7,1651 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Automatically change which element of array to display in React

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related