React native Warning: Each child in a list should have a unique "key" prop-CodePudding

i have the html part.

<CompanyFlatList
              data={companyList}
              keyExtractor={(item) => item.id}
              renderItem={({ item }) => (
                <CompanyCardComponent
                  companyName={item.name}
                  goToHomeScreen={() => GoToLoadingScreen(item.code)}
                  randomColor={generateRandomCornerColor()}
                />
              )}
            />

i am getting warning message.

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

How to use key props in this?

CodePudding user response：

You should have a key property in every item in your companyList, so you should do something like this (this is just an example, I don't know how you are getting your companyList):

companyList.forEach(companyItem => companyItem.key = companyItem.code)

This way, every item in your list as a uniq key (assuming that the codes are unique)

CodePudding user response：

Use the item.code as a your key

It doesn't need to be id necessarily. item in keyExtractor will be each member of your array companyList, so item in your case is an object that looks something like this { "code": 465, "name": "מע", }

<CompanyFlatList
  data={companyList}
  keyExtractor={(item) => item.code} // <----- change this
  renderItem={({ item }) => (
    <CompanyCardComponent
      companyName={item.name}
      goToHomeScreen={() => GoToLoadingScreen(item.code)}
      randomColor={generateRandomCornerColor()}
    />
  )}
/>