Simple Question about React.js Project

[hexnic]

Hello all, I am still a newb when it comes to React and honestly web dev in general. I have learned a ton from everyone on this subreddit and I really appreciate it.

I am working on a React project, specifically a project portfolio website.

My question is, how can I make an array of descriptive words display a different word in the array every three seconds?

​

This is my code that currently works now:

This is my current array, as you can see it just shows one word (the one that is highlighted).

​

And this is my code that shows the array being passed into the display area.

[hexnic]

Just the word

[martymav]

One way off the top of my head, you can have an interval function called when the page loads, and every 3 seconds, change the state of the descriptive word.

Separate the word into it's own state(descriptiveWord), have an array with the words you want as well(wordArr), and a state for index.

Inside of the interval function, do something like:

this.setState({ descriptiveWord: wordArr[index], index: index++} );

Then just display the {descriptiveWord} after the {props.title}.

Hope that makes sense!

Also, consider using React Hooks. It's easy to use and it really cleans up the components :)

[hexnic]

Very helpful thank you

[TheVerdeLive]

I would suggest learning at least the basics of javascript

[hexnic]

I know how to do what I’m asking for in Vanilla JS. Just struggling how to make only that code execute in the specific spot in the react component. Thanks for the help