1

I added the keys like that:

export const Field = ({ state, onCellPress }) => {
  return (
    <View style={styles.field}>
      { state?.map((row, rowIndex) => (
        <View style={styles.row} key={`${rowIndex}`}>
          { row?.map((value, columnIndex) => (
            <Cell
              text={value}
              onPress={onCellPress}
              row={rowIndex}
              column={columnIndex}
              key={`${columnIndex}`}
            />
          ))}
        </View>
      ))}
    </View>
  );
}

But I still get the warning "Each child in a list should have a unique "key" prop. I tried also like that:

    <Cell
      text={value}
      onPress={onCellPress}
      row={rowIndex}
      column={columnIndex}
      key={`${rowIndex}:${columnIndex}`}
    />

But I still get it. What do I do wrong?

Olga Climova
  • 381
  • 3
  • 13

1 Answers1

1

Here you need to work on couple of things:-

  1. Check if you are iterating this component from parent, if yes pass a key to the outer-most element also.
  2. Are you going to manipulate the array such as re-order, filtering, etc. If so you need to rethink about uniques key as it may lead to bugs in future.
  3. If required pass a key to element inside the children as well

For reference i am attaching two links here: Link1 Link2

Dharman
  • 30,962
  • 25
  • 85
  • 135
shankar upadhyay
  • 883
  • 12
  • 18