React-typing-animation Is Not Re-rendered When State Is Changed

I have the following component import React, { Component } from 'react'; import Typing from 'react-typing-animation'; export class InfoDisplayer extends Component { infos = ['th

Solution 1:

Some notice points:

• Add loop
• Add Typing.Reset

Refer to document here

---

importReactDOM from"react-dom";

import"./styles.css";

importReact, { Component } from"react";
importTypingfrom"react-typing-animation";

import"./styles.css";

const infos = ["this is a test", "this is another test"];

exportclassInfoDisplayerextendsComponent {
  constructor(props) {
    super(props);
    this.state = {
      currentIndex: 0
    };
  }

  componentDidUpdate() {
    console.log(this.state.currentIndex);
  }

  updateDisplayedInfo = () => {
    this.setState({ currentIndex: this.state.currentIndex === 0 ? 1 : 0 });
  };

  render() {
    return (
      <TypingonFinishedTyping={this.updateDisplayedInfo}loop>
        {infos[this.state.currentIndex]}
        <Typing.Resetcount={1}delay={500} /></Typing>
    );
  }
}

exportdefaultInfoDisplayer;

functionApp() {
  return (
    <divclassName="App"><h1>Hello CodeSandbox</h1><InfoDisplayer /></div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);