Cursor jumps to next line when all items are looped again.

[tourajvaziri]

This used to work in the version I was using before (1.3.3) I updated to the version (1.6.2) And now I have the issue.

Basically I have an array of strings. I go through each item and then I erase it (Backspace). When it reaches the end of array, it loops back to the first item (loop = true) but then in the new version the cursor jumps to the next line. I have attached two screenshots for it.

This is also the code I am using:

import * as React from "react"; import "./Home.css"; const Typing = require("react-typing-animation").default;

interface HomeState { names: string[]; } class Home extends React.Component<any, HomeState> { constructor(props: any) { super(props); this.state = { names: ["item1", "item2"] }; }

render() {
    let menuNames = [];
    for (var i = 0; i < this.state.names.length; i++) {
        menuNames.push(
            <div>
                <span>{this.state.names[i]}.</span>
                <Typing.Delay ms={1000} />
                <Typing.Backspace count={this.state.names[i].length + 1} />
            </div>
        );
    }
    return (
        <Typing loop="true" speed={100}>
            {menuNames}
        </Typing>
    );
}

}

export default Home;

new version: (bad)

old version: (good)

[mayank]

work around, add <Typing.Backspace count={1} /> in the start.

<Typing>
<Typing.Backspace count={1} />

....
</Typing>