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;
Some feedback:
setInterval() and pass it into clearInterval()useEffect()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 introArrayintroArray with string 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>
);
}
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;