react-typewriter icon indicating copy to clipboard operation
react-typewriter copied to clipboard

Error with rendering a list of elements

Open ChrisCooney opened this issue 8 years ago • 3 comments

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 avatar Apr 23 '16 21:04 ChrisCooney

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

ChrisCooney avatar Apr 23 '16 21:04 ChrisCooney

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

frostney avatar Apr 23 '16 21:04 frostney

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.

ChrisCooney avatar Apr 23 '16 21:04 ChrisCooney