react , missing unique key for map iteration

Question

I'm getting an error that i'm missing key prop for my map iteration.Got confused where i'm missing one . I have a map inside map.Could you please help me

displayData() {
  const { data, index } = this.state;
  let sortedData = data[index].settings.map((item, id) => {
    const { _init_ } = item.settings;
    return _init_.map((message, index) => {
      const { message_content } = message;

      return message_content === undefined ? null : (
        <>
          <div>
            <div key={index} className="settings-message">
              {message_content}
            </div>
          </div>
          <div>yes</div>
        </>
      );
    });
  });
  return sortedData;
}

Answer 1

The key should be on the parent div.

return message_content === undefined ? null : (
  <div key={index}>
    <div className="settings-message">
      {message_content}
    </div>
  </div>
)

Answer 2

Your top level component needs a unique key. Use explicit fragment syntax and add the key to the fragment,

displayData() {
  const { data, index } = this.state;
  let sortedData = data[index].settings.map((item, id) => {
    const { _init_ } = item.settings;
    return _init_.map((message, index) => {
      const { message_content } = message;

      return message_content === undefined ? null : (
        <React.Fragment key={index}>
          <div>
            <div className="settings-message">{message_content}</div>
          </div>
          <div>yes</div>
        </React.Fragment>
      );
    });
  });
  return sortedData;
}

ps. You may have one more div than you actually need