react warning: Each child in an array or iterator should have a unique "key" prop.

[iambumblehead]

I'm seeing a react warning using the latest react-player sources

react-player: 0.25.3
react: 16.1.0

warning.js:33 Warning: Each child in an array or iterator should have a unique "key" prop.

Check the top-level render call using <video>. See https://fb.me/react-warning-keys for more information.
    in source

the stack trace shows this as the only non-react source file associated with the message

render  @  FilePlayer.js:245

and opening that shows this...

      return _react2['default'].createElement(
        Element,
        _extends({
          ref: this.ref,
          src: src,
          style: style,
          preload: 'auto',
          controls: controls,
          loop: loop
        }, config.file.attributes),
        url instanceof Array && url.map(this.renderSource),
        config.file.tracks.map(this.renderTrack)
      );

the ReactPlayer is included in this way

            <ReactPlayer
                ref={this.ref.bind( this )}
                url={[ { src: file_url, type: mime_type } ]}
                playing={videoplayer.playing}
                playsinline={true}
                onPlay={this.onPlay.bind( this )}
                onStart={this.onStart.bind( this )}
                onReady={this.onReady.bind( this )}
                onEnded={this.onEnded.bind( this )}
                volume={videoplayer.volume}
                muted={videoplayer.mute}
                loop={false}
                controls={false}
                width='100%'
                height='100%'
                id='video'
                style={{ visibility: 'hidden' }}
                progressFrequency={100}
                onProgress={this.pulse.bind( this )}
            />

[iambumblehead]

A solution I found was to define the url object above in this way...

url={[ { src: file_url || 1, type: mime_type } ]}

the lifecycle of my application renders video before the file_url is defined

perhaps a change that filters out invalid source definitions or or maybe uses an alternative key when src is undefined?

this.renderSource

return _react2['default'].createElement('source', { key: src, src: src, type: type });

[cookpete]

If file_url may not be defined yet I guess the best way to do it would be

url={file_url ? [{ src: file_url, type: mime_type }] : null}

but you're right, the key should fallback to the array index if src is not defined, to avoid errors.