I am trying to make a little animation with an array where it kind of types out my name like in a command prompt. This is my first time using hooks in react so I'm kind of lost. I'd like to make it so that the interval stops at "Felipe Garcia Diaz" but instead of it stopping the interval just makes my text disappear and it continues to run in the background. What am i doing wrong exactly?

HooksExample.jsx

import React, {useState} from 'react';
import socket from './socket';

function Main(props) {
    let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"];

    let [myName, setName] = useState(introArray);
    let [climber, setClimber] = useState(0);

    let block = false;
    if(block === false) {
        let climbArray = () => {
            setClimber(climber  = 1);
            if(climber === introArray.length) {
                block = true;
                console.log('dead');
            }
            console.log('live', climber);
        }
        setInterval(climbArray, 200);
    }
    return (
        <React.Fragment>
            <h1>{myName[climber]}</h1>
        </React.Fragment>
    );
}


export default Main;

CodePudding user response：

Some feedback:

• to clear an interval, you need to store the value returned from setInterval() and pass it into clearInterval()
• triggering an interval and updating state are side effects so should be wrapped inside useEffect()
• for useEffect() to access latest climber value, it must be in the dependency array like [climber]
• myName does not need to be in state because its value can be derived from introArray
• I replaced introArray with string array for simplicity's sake, if you really want to use array then corresponding JSX is <h1>{introArray(climber)}</h1>

import React, {useState, useEffect} from 'react';
import "./styles.css";

export default function App() {
  const intro = "Felipe Garcia_";
  const [climber, setClimber] = useState(0);

  useEffect(()=>{
    const interval = setInterval(() => {
      if (climber === intro.length) {
        console.log('clearing');
        clearInterval(interval);
      } else {
        setClimber((val) => val   1);
      }
    }, 200);
    // clean up interval on unmount
    return (()=>{
      clearInterval(interval);
    });
  }, [climber]);

  return (
      <React.Fragment>
        <h1>
          {intro.substring(0, climber)}_
        </h1>
      </React.Fragment>
  );
}

Working example

CodePudding user response：

import React, {useState} from 'react';
import socket from './socket';

function Main(props) {
    let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"];
let interval 
    let [myName, setName] = useState(introArray);
    let [climber, setClimber] = useState(0);

    let block = false;
    if(block === false) {
        let climbArray = () => {
            setClimber(climber  = 1);
            if(climber === introArray.length) {
                block = true;
                if(interval !== undefined){
                  clearInterval(interval)
                }
              
                console.log('dead');
                
            }
            console.log('live', climber);
        }
        interval = setInterval(climbArray, 200);
    }
    return (
        <React.Fragment>
            <h1>{myName[climber]}</h1>
        </React.Fragment>
    );
}


export default Main;