How do I iterate over an array with a map function, infinitely?

Question

I am building a React JS application. So, I want to print something over and over from an array, but it has only two elements. I am using a custom package called 'Typist' that enables me to give a 'Typing' kind of animation with whatever I type.

I am basically trying to type 'Hi', erase it and then type 'Ola' and then erase it and then start with 'Hi' again and keep repeating this pattern.

Here's what I have right now:

let greetings=["Hi","Ola"];

render() {

    return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />
                {
                    greetings.map(i =>{
                        return <li><h1>{i}</h1>
                            {<Typist.Backspace count={12} delay={1000} />}
                        </li>
                    })

                }

            </Typist>

PS I did find a way to do it a few times,still not infinite, by doing this:

let greetings=["Hi","Ola"];

var actualTyping= greetings.map(i =>{
    return <li><h1>{i}</h1>
        {<Typist.Backspace count={12} delay={1000} />}
    </li>

});

var rows=[];

for(var i=0;i<10;i++){
    rows.push(actualTyping)
}

return(
        <div className={"TypistExample-header"} >
            <Typist className={"TypistExample"}>

                <Typist.Delay ms={1000} />

                {rows}

            </Typist>
       </div>
    );

Answer 1

You can use Typist's onTypingDone property to restart the animation. Pass the text array via state to Typist. When the typing is done, clear the state, which will remove the rendered Typist, then restore the original text, and it will be typed again ( sandbox ).

Note: setState is asynchronous, and it batches updates together or defers them to a later time. In this case we want to clear the text (set null ), and only after the view is updated repopulate the text . To do so, we can use the 2nd param of setState , a callback that is fired only after the update ( null ) has been applied.

const greetings = ["Hi", "Ola"];

class ContType extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: props.text
    };
  }

  onTypingDone = () => {
    this.setState(
      {
        text: null
      },
      () =>
        // run this callback after the state updates
        this.setState({
          text: this.props.text
        })
    );
  };

  render() {
    const { text } = this.state;

    return (
      text && (
        <Typist onTypingDone={this.onTypingDone}>
          <Typist.Delay ms={1000} />
          {text.map((i, index) => {
            return (
              <div key={index}>
                <h1>{i}</h1>
                {<Typist.Backspace count={12} delay={1000} />}
              </div>
            );
          })}
        </Typist>
      )
    );
  }
}

render(<ContType text={greetings} />, document.getElementById("root"));

Answer 2

Better and simple solution would be creating a constant integer array of your choice and then mapping carried out using the value specified for integer.

const a = [1...10000]
let greetings = ["hi", "hello"]
  render(){
    return(
      a.map( i => {
        <h1>greeting[0] - greeting[1]</h1>
      })
    )
}

And always, keep in mind that infinite loop cause react engine to break down. Good practice is to specify an integer value for mapping for such cases.