Get unique key warning when add a key attribute to a div element with some sub nodes in it with react v18.2.0

Question

The codes below will cause the warning: "Each child in a list should have a unique 'key' prop." when I try to render the div element into the page.

<div {...{}} key={"formKey"}>
  <input type="text" />
  <button>Test</button>
 </div>

And when I adjust my codes into the following, the warning won't appear.

<div key={"formKey"} {...{}}>
  <input type="text" />
  <button>Test</button>
 </div>

It seems to be the order of the props that I passed to the div element, and the warning won't appear either when the div element only have at most one sub node. I just can't figure out the reason.

I just want to know the real reason which caused the different situations that I described, I just thouhgt that the order I passed props should never have different results.

Answer 1

I can't reproduce your bug

const App = () => <div>
  <div {...{}} key={"formKey"}>
    <input type="text" />
    <button>Test</button>
  </div>
  <div {...{}} key={"formKey"}>
    <input type="text" />
    <button>Test</button>
  </div>
</div>;

ReactDOM.render(<App/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

However it might be because "formKey" is a constant string, not a variable different for each of your list element. You code should typically look like this:

const MyComponent = () => <ul>
  {
    users.map((user) => <li key={user.id}>{user.name}</li>)
  }
</ul>;