Question 378651 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React.js + antd Grid: "Each child in a list should have a unique "key" prop" error

EDIT: After more testing it appears the error comes from the parent component to this one, which is an antd Modal. Furthermore, it seems like the issue comes from something inside the Modal implementation itself, rather than from something in my code.

I have to dynamically render a grid from the contents of an array with Ant Design Grid I’m using the _.map method to do so, which causes the following warning to appear as an error message:

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

So far I’ve tried everything I can think of. I’ve started pruning my code until I reached the following, but I still get the same error (or warning, I’m not sure which it is).

function SettingsContent (props) {
  const {SettingsA, SettingsB} = props;
  return (
    <Row gutter={[12,0]}>
      <Col span={12}> 
        <Row>
          <Col span={24}>
            SETTINGS A
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            { 
              SettingsA.map((settingsFile,settingsFileIndex)=>{
                return(
                  <Row key={settingsFileIndex}>
                  </Row>
                )
              })
            }
          </Col>
        </Row>
      </Col>
    </Row>
  );
}

It seems to me that the Row/Col components just don’t care about keys (EDIT: meaning that they don’t acknowledge it, not that they don’t need it). Is there anything I can do about it or should I just not use antd Row/Col and use different components for this?

Tags:

2

Answers


  1. 0

    Keys are what React uses to keep track of components in the dom.

    From the documentation: https://react.dev/learn/rendering-lists

    Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can move (e.g. due to sorting), get inserted, or get deleted. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree.

    So, you’re wrong about this:

    It seems to me that the Row/Col components just don’t care about keys.

    All list elements should have a key added to them and it sounds like you’ve been creating "lists" of rows and columsn without adding appropriate keys onto them.

    I don’t know what’s in your settingsFileIndex, but you’re on the right track to setting a unique key for both the rows and column components. You don’t have to switch components, you just need to add unique keys properly.

    However, it’s worth noting the additional following pitfall noted in the documentation about using an index as the key:

    tl;dr: Create unique keys, don’t just use the index.

    You might be tempted to use an item’s index in the array as its key. In fact, that’s what React will use if you don’t specify a key at all. But the order in which you render items will change over time if an item is inserted, deleted, or if the array gets reordered. Index as a key often leads to subtle and confusing bugs.

    Similarly, do not generate keys on the fly, e.g. with key={Math.random()}. This will cause keys to never match up between renders, leading to all your components and DOM being recreated every time. Not only is this slow, but it will also lose any user input inside the list items. Instead, use a stable ID based on the data.

    Login or Signup to reply.
  2. 0

    Keys are needed to make it easier for React DOM to find unique elements. You can add the key like this to parent wrapper:

    function SettingsContent (props) {
  const {SettingsA, SettingsB} = props;
  return (
    <Row gutter={[12,0]}>
      <Col span={12}> 
        <Row>
          <Col span={24}>
            SETTINGS A
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            { 
              SettingsA.map((settingsFile,settingsFileIndex, uniqueKey)=>{
                return(
                  <Row key={uniqueKey}> //This key should be unique per item
                  </Row>
                )
              })
            }
          </Col>
        </Row>
      </Col>
    </Row>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search