Может кто нибудь сказать как сделать так, что бы после отображения 'Постоянно учусь' удалилось только 'учусь' и написалось 'ленюсь'
import { useState, useEffect } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
export const Banner = () => {
const toRotate = ['Веб-разработчик', 'Постоянно учусь', 'Постоянно ленюсь'];
const [loopNum, setLoopNum] = useState(0);
const [text, setText] = useState('');
const [delta, setDelta] = useState(150 - Math.random() * 150);
const period = 1000;
const [isDeleting, setIsDeleting] = useState(false);
useEffect(() => {
const ticker = setInterval(tick, delta);
return () => clearInterval(ticker);
}, [text]);
const tick = () => {
const i = loopNum % toRotate.length;
const fullText = toRotate[i];
const updateText = isDeleting
? fullText.substring(0, text.length - 1)
: fullText.substring(0, text.length + 1);
setText(updateText);
if (isDeleting) {
setDelta((prevDelta) => prevDelta / 2);
}
if (!isDeleting && updateText === fullText) {
setIsDeleting(true);
setDelta(period);
} else if (isDeleting && updateText === '') {
setIsDeleting(false);
setDelta(500);
setLoopNum((prevLoopNum) => prevLoopNum + 1);
}
};
return (
<section className="banner">
<Container>
<Row>
<Col xs={12} md={6} xl={7}>
<span>Добро пожаловать</span>
<h1>{`Привет, я Денис ${text}`}</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
fugiat consequuntur amet explicabo delectus voluptatem libero eum
impedit! Saepe vel, impedit voluptatibus dolores ipsum enim
placeat deleniti numquam dolor nostrum.
</p>
</Col>
</Row>
</Container>
</section>
);
};