This content originally appeared on DEV Community and was authored by Bay Area Ninja
my Goal: Is to create a simple effect that prints out a string one letter at a time.
example: string = "TEXT". it should print T E X T
Whats currently being printed is: T X T undefined
my code:
`const [placeholder, setPlaceholder] = useState('');
const
string = 'TEXT',
index = useRef(0);
useEffect(() => {
function showChar() {
setPlaceholder(prev => prev + string[index.current]);
console.log(index.current)
index.current++;
}
if (index.current < string.length) {
let addChar = setInterval(showChar, 500);
return () => clearInterval(addChar);
}
}, [placeholder]);
return (
{placeholder}
)
export default App;`
This content originally appeared on DEV Community and was authored by Bay Area Ninja
Bay Area Ninja | Sciencx (2022-04-15T00:47:56+00:00) #help useRef within useEffect. Retrieved from https://www.scien.cx/2022/04/15/help-useref-within-useeffect/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.