ianbjorndilling / react-typewriter

A React component for creating typing animations.
MIT License
86 stars 37 forks source link

Error with rendering a list of elements #10

Open ChrisCooney opened 8 years ago

ChrisCooney commented 8 years ago

Version

0.3.0

Steps to reproduce

  1. Create a list of React elements
  2. Pass those into the TypeWriter Component
  3. Observe console

    Expected behavior

Typewriter component should render the text.

Actual behavior

Error message is appearing: Cannot read property 'stamp' of undefined

Sample Code

import React from 'react';
import TypeWriter from 'react-typewriter';

let Output = (props) => {

  let elements = props.valueObject.values.map(function(value) {
      return <p key={x++}>{value}</p>;
   });

  return (
    <div className="col-xs-12">
      <div className="output">
        {props.valueObject ?
          <TypeWriter typing={1} maxDelay={20}>
            {elements}
          </TypeWriter>
          : null}
      </div>
    </div>)
}

export default Output;
ChrisCooney commented 8 years ago

Turns out the issue is caused by passing in multiple elements, which is a fair react standard.

frostney commented 8 years ago

Does this work if you wrap your elements in a container?

ChrisCooney commented 8 years ago

No I'm afraid it doesn't Frost!

The work around I've got is to have multiple TypeWriter elements. I'm struggling to get them to re-render new content when some content has already been rendered.