Disable / workaround React key requirement?

Question

I'm getting the warning Each child in an array or iterator should have a unique "key" prop. Check the render method of Login

I want to pass an array of elements back, without using keys. I have to believe there's a workaround for this, without adding a pointless wrapper?

Note the return [<div/>, <div/>];

  render () {
    return (
      <div className='login'>
        {this.mobileWeb()}
        {this.pcWeb()}
      </div>
    );
  }

  mobileWeb () {
    if (this.state.isMobileWeb === true) {
      return [
        <div className='sky-container'></div>,
        <div className='sea-container'></div>
      ];
    }
  }

  pcWeb () {
    if (this.state.isMobileWeb !== true) {
      return [
        <div className='sky-container'></div>,
        <div className='sea-container'>
          <LoginForm onChange={this.onChange} ref='loginForm' onEmailChange={this.onEmailChange} onPasswordChange={this.onPasswordChange} />
          <input type='submit' value='Submit' onClick={this.login} />
        </div>
      ];
    }
  }

Answer 1

There is a valid use case for not wanting to use keys, if you e.g. render strongly differing trees (think blog posts) or have a function that returns always the same array of items.

When you don’t provide an explicit key, React will use the index as key and emit a warning – however you would want to silence the warning, as using the index here is perfectly valid.

This doesn’t seem to be possible however, which has the sad consequence that you either have to make your code more complex for no reason (adding useless keys) or ignore the warnings (which means that valid warnings might be lost among the noise).

Answer 2

As of now, probably since 16.2.0 (November 28, 2017) you can wrap the elements inside <React.Fragment> instead of an array. The child components do not need keys although array of Fragments will still need keys.

Answer 3

you should not be passing the child element without key, React uses key for diff diff using virtual dom (it is lightweight javascript object). Never use key as Date.now() or Math.random(), because during render the react will see different key value and it will create new dom object.

Answer 4

A few years later, I will answer with newfound knowledge: the 'pointless wrapper' actually has semantic meaning to describe the collection and it's pretty normal to use a fragment eg <> ... </>, or a wrapper <div> to describe it, just not an array.

Answer 5

Edit: Do not do this, as the comment by @Jason Miller suggests.

---

Whenever it is straightforward, it is best to simply use the indices of the array or some other ID. Sometimes, however, this is impractical, for example, when a complex layout is generated dynamically. A workaround for suppressing the warning is to generate a random number as a key using key={Math.random()}. There are around 15 safe digits in the returned float and thus >10^15 possible outcomes, which should be safe enough for the most applications.