infinite loop through render [1:17am]

[frankcollins3]

attempting to do:

---

Show that the water drops illustrate a streak of perfect water cycling

localContHover === false ?

{streakData.length > 0 && <>{renderStreak()}</>}

:

{streakData.length > 0 && <>{renderStreakExplain()}</>}

---

error returned:

👍 onMouseEnter={setLocalContHover(true)} // the first UI allows for the toggling to show the second container 👎 onMouseLeave={setLocalContHover(false)} // i don't understand why this doesn't work.

because when you enter, the container toggles to render {renderStreakExplain()} as far as I see in the logic, there wouldn't be an infinite render because it would toggle back to original cont upon mouseLeave

meaning that the cursor would no longer be on the container, leaving cont ready to be {mouseEntered()} again.

infinite render?

proposed approach: hover onto the () () water droplet container:

[frankcollins3]

that function is better off as the mouseLeave

[1:31am]

[frankcollins3]

this works:

  const contHoverFunc = () => {
      setTimeout( () => setLocalContHover(true), 1000)
      setTimeout( () => setLocalContHover(false), 3000)
  }

  return (
    <div className="streak-container">
        {
    localContHover === false ? <ul onMouseLeave={contHoverFunc}>{streakData.length > 0 && <>{renderStreak()}</>} </ul> : <ul>{streakData.length > 0 && <>{renderStreakExplain()}</>} </ul> 
        }          
    </div>
  );

[1:36am]