Repeated calls to react-typist using React.js

Question

I am using the package react-typist to filter through and type some text The component looks like this:

Typing = React.createClass({

  getInitialState: function() {
      return { textIndex: 0 };
  },

  next: function() {
    // increment the textIndex by one
    this.setState({ textIndex: this.state.textIndex + 1});
    //this.setState({visible: false});
  },

  render: function() {
    const docs = '#one';
    return (

<div>
      <div className="TypistExample">


        <Typist className="TypistExample-header" avgTypingSpeed={15000} startDelay={1000}
          onTypingDone={this.next} cursor={{show: false}}>
            <h1><a href={docs}>{typedtext[this.state.textIndex].text}</a></h1>
        </Typist>

        <p>{this.state.textIndex}</p>
        <p>{typedtext[this.state.textIndex].text}</p>

      </div>
</div>

    );
  }

});


var typedtext = [

{id: 'name', text: 'Some Name'},
{id: 'growth', text: 'Some Growth'},
{id: 'development', text: 'Some Dev'},
{id: 'analtyics', text: 'Some Lytics'},

];

I am hoping to iterate through the array, having the new row of text to get typed out when the old text finishes. However, as it is now, this stops after the first row of text. I know that it is iterating, however, because these lines:

<p>{this.state.textIndex}</p>
<p>{typedtext[this.state.textIndex].text}</p> 

show that it is (at least the once).

How can I fix this?

Answer 1

I saw the documentation and example...it seems onTypingDone is called when the all the data is typed out.. I think you are expecting it to get called everytime...like some sort of loop but that wont happen. Instead it will just display the first element after that the value is incremented but it wont be typed out.

And also you need have data that you want to be typed out.

So try this...

<Typist className="TypistExample-header" avgTypingSpeed={15000} startDelay={1000}
          onTypingDone={this.next} cursor={{show: false}}>
           {
              typedtext.map(function(item){
                     <span key={item.id}>
                         <h1><a href={docs}>{item.text}</a></h1>
                     </span>
                })
            }
 </Typist>

I guess that should solve the issue. Let me know if it works.