useEffect / useState / setInterval React on Rails components not rendering - ruby-on-rails

Question

I am trying to use useEffect, setInterval and useState in order to cycle through fontawesome icons at a timed interval. I am very new to react and I am not getting any errors my component and all of the components below it are just not rendering. I am using the react-rails gem at its most recent version
here is the code for the component:
import React, {useEffect, useState} from "react"
import PropTypes from "prop-types"
function Changing(){
const mobileData = {
icon: "fas fa-mobile-alt",
caption: "Mobile Applications",
style: ""
}
const webData = {
icon: "fas fa-desktop",
caption: "Web development",
style: ""
}
const internetData = {
icon: "fas fa-wifi",
caption: "& Everything Internet",
style: ""
}
const data = [mobileData, webData, internetData];
const [iterable, setIterable] = useState(0);
const [iconData, setIconData] = useState(mobileData);
function changeIterable(){
if(iterable === 0){
setIterable((prevIterable) => prevIterable + 1)
}
else if(iterable === 1){
setIterable((prevIterable) => prevIterable + 1)
}
else{
setIterable((prevIterable) => prevIterable - 2)
}
}
useEffect(() => {
const intervalID = setInterval(() =>{
changeIterable();
setIconData(data[iterable])
}, 4000);
return () => clearInterval(intervalID)
})
return (
<React.Fragment>
<div className="row">
<div className="col-md-6">
<i className={iconData.icon} style={iconData.style} />
</div>
<div className="col-md-6">
<h3 style={iconData.style}>{iconData.caption}</h3>
</div>
</div>
</React.Fragment>
);
}
export default Changing
and I am rendering the component with:
<%= react_component "Personal" %>
<%= react_component "Changing" %>
<%= react_component "Stack" %>
Personal and Stack components were correctly rendering, but once I added Changing every component under it would not render.
I am pretty new rails and even more of a n00b when it comes to react, I was wondering if useEffect, setInterval and useState are even supported in react-rails. Any help is welcomed, thank you!

Answer 1

Firstly you are setting the style to an empty string when instead you'd want to set the style to an empty object {} in iconData as this is JSX. As far as next component not rendering, there could be either CSS or logic causing it. Best way to debug is to just verify with a simple component that returns a vanilla <p>Test this</p> to see why the next component is not showing, but I have a feeling that Stack has logic somewhere that returns nothing.