I get warning "warning: Each child in a list should have a unique "key" prop." in react js

Question

I have the following render function, in which I'm getting a warning

"warning: Each child in a list should have a unique "key" prop."

What is the problem? is it true to write key for each tag?

render() {
            return (
                [      <h1>Update Post</h1>,

                    <form>
                        <div >
                            <label>title</label>
                            <input type="text" value={this.state.title} onChange={this.handleTitleChange}   />
                        </div>
                        <div >
                            <label>body</label>
                            <input type="text"  value={this.state.body} onChange={this.handleBodyChange}  />
                        </div>
                        <div >
                            <label>userId</label>
                            <input type="text" value={this.state.userId} onChange={this.handleUserIDChange} />
                        </div>
                        <div >
                            <input type="button" value="Update post"  onClick={this.handleUpdatePost} />
                        </div>
                    </form>


                ]
            );

        }

Answer 1

looking at your code, You are returning an array of markup similar to what we usually return from map function (an array of markups) which is subjugated to change by default. Wrapping your markup to React.Fragment seems like a much suitable choice instead of wrapping it in array

Answer 2

What your render function returns is an array that contains 2 elements.

When you do this, React knows, you can shuffle things at any moment you like. So, to be able to also "shuffle" DOM with the minimum re-rendering possible, React asks you to provide a key.

However in this situation, I'd just wrap both <form> & <h1> in either:

1. <div>
2. <React.Fragment> or, its shortcut <>

Answer 3

This is because you missing a Keys for each of element in returned array. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

Therefore, you could add the Keys for each of element with key={Math.floor(Math.random() * 100)}

  return (
    [
      <h1 key={Math.floor(Math.random() * 100)}>Update Post</h1>,

      <form key={Math.floor(Math.random() * 100)}>
        <div>
          <label>title</label>
          <input
            type="text"
            value={this.state.title}
            onChange={this.handleTitleChange}
          />
        </div>
        <div>
          <label>body</label>
          <input
            type="text"
            value={this.state.body}
            onChange={this.handleBodyChange}
          />
        </div>
        <div>
          <label>userId</label>
          <input
            type="text"
            value={this.state.userId}
            onChange={this.handleUserIDChange}
          />
        </div>
        <div>
          <input
            type="button"
            value="Update post"
            onClick={this.handleUpdatePost}
          />
        </div>
      </form>
    ]
  );

Answer 4

You are returning an array and in React all child elements of an array must have a key property; see this explanation. But in your case you don't need to return an array. The render method must return only one element so in your case you can return all of your elements enclosed in another element like a div, or the proper way, in a <Fragment> tag see here, or empty element <> which is a shortcut for <Fragment>.

div:

return (
  <div>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </div>
);

Empty element:

return (
  <>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </>
);

Or as a fragment:

return (
  <Fragment>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </Fragment>
);

For the fragment you will need to import it like:

import React, { Fragment } from 'react'