JSX children duplicated during Typist animation sequence (Error: encountered two children with the same key 'Typist-element-br-.......')

[colemahatmccreary]

Hi,
I'm working with a typist component that uses dynamically api-generated text as the "child" or nested content.

The Typist component itself is rendered conditionally upon all of the necessary text being loaded to local state and passed into the nested text.

{ this.state.display ? 
        <Typist>
                this is some text. today is {this.state.dayOfWeek}. 
                <br />
                <br />
                it is {this.state.localTemp} degrees outside
                <br />
                <br />
                .....
                <br />
                <br />
                ....
        </Typist>
: '' }

As you can see use a number of <br /> components in the body of this text, and on 80% of page loads, the animation proceeds to the end, but i receive the following error at varying points in the typing sequence:

Warning: Encountered two children with the same key, Typist-element-br-1535132419832.6477. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
in div (created by Typist)

At the same time as the error message logs in the console, an additional <br /> renders somewhere in the block of text as it continues typing.

this causes the entire block of text to jump down a line (or lines, depending on the number of times this error is thrown).

Any insight on how to avoid this? I've tried explicitly passing a key as a prop/attr on each <br /> but no luck.

Thanks

[cryptoads]

I am having the same exact issue.

I ended up breaking my huge Typist component into many smaller components for now and that seemed to fix my issue.

I think I see the issue in the utils.js file and might try submit a fix if I get it figured out.

[jstejada]

ahh yeah, it seems to be an issue with computing the key for the elements. happy to take a PR with a fix!

[cryptoads]

PR with fix submitted.

[stevemao]

#58 should fix it

[jstejada]

closing as #58 has been merged in