React и изменение текса

[deniscikasov@gmail.com]

Может кто нибудь сказать как сделать так, что бы после отображения 'Постоянно учусь' удалилось только 'учусь' и написалось 'ленюсь'

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>
  );
};

[ksa]

deniscikasov@gmail.com, что-то ты там так накрутил...
Что в итоге хотел сделать?

[deniscikasov@gmail.com]

https://codedamn.com/playground/twg0R52ErCm39iGyoTwct надеюсь удастся посмотреть код. Мне нужно что бы при удалении 1 индекса массива toRotate(10 стр.) удалялось только 'учусь' и отобразилось 'ленюсь'

[ksa]

Мне нужно что бы при удалении 1 индекса массива toRotate(10 стр.) удалялось только 'учусь' и отобразилось 'ленюсь'

Я пока ничего не понял...

[deniscikasov@gmail.com]

Вот смотри. Если откроешь площадку для React - что я скинул выше. Там увидишь как меняются слова. Появилось слово Веб-разработчик, потом оно удалилось и вместо него появилось Постоянно учусь и как бы сделать так, что бы Постоянно учусь удалилось не полностью, а только слово Учусь и вместо него написалось Ленюсь. И всё по циклу пошло заново

[ksa]

Появилось слово Веб-разработчик, потом оно удалилось и вместо него появилось Постоянно учусь и как бы сделать так, что бы Постоянно учусь удалилось не полностью, а только слово Учусь и вместо него написалось Ленюсь. И всё по циклу пошло заново

Как вариант - сделать так. В консоли будет видно что рендерится только "учусь" и "ленюсь"...
Правда в StrictMode они будут повторяться дважды... Но это уже другая история.

import {StrictMode, useEffect, useState, memo} from 'react';
import ReactDOM from 'react-dom/client';

//
const Word = memo(({wrd}) => {
  console.log('Word', wrd)
  return (
    <span>{wrd} </span>
  )
})
//
const arr = ['Веб-разработчик', 'Постоянно учусь', 'Постоянно ленюсь']
//
function App(props) {
  const [ind, setInd] = useState(0)
  useEffect(_ => {
    const t = setInterval(_ => setInd(v => (v + 1) % arr.length) ,1000)
    return _ => clearInterval(t)
  })
  return (
    <section>
      <p>Привет, я Денис, {arr[ind].split(' ').map(v => <Word key={v} wrd={v} />)}
      </p>
    </section>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

[ksa]

Или вот так, если "слов" именно два...

import {StrictMode, useEffect, useState, memo} from 'react';
import ReactDOM from 'react-dom/client';

//
const Word = memo(({wrd}) => {
  console.log('Word', wrd)
  return (
    <span>{wrd} </span>
  )
})
//
const arr = ['Веб-разработчик', 'Постоянно учусь', 'Постоянно ленюсь']
//
function App(props) {
  const [ind, setInd] = useState(0)
  useEffect(_ => {
    const t = setInterval(_ => setInd(v => (v + 1) % (arr.length)) ,1000)
    return _ => clearInterval(t)
  })
  const a = arr[ind].split(' ')
  return (
    <section>
      <p>Привет, я Денис, <Word wrd={a[0]} /> {a[1] && <Word wrd={a[1]} />}
      </p>
    </section>
  );
}


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

[deniscikasov@gmail.com]

Спасибо. + поставить не могу, т.к нужно кому то другому сначала поставить