useEffect / useState / setInterval React on Rails components not rendering

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!

score 1 · Answer 1 · answered Nov 04 '20 at 18:02

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.

useEffect / useState / setInterval React on Rails components not rendering

1 Answers1