React Native: Each child in a list should have a unique "key" prop {Conditional Rendering} SLOVED

Question

I created 2 custom components and rendered them inside a FlatList, however I keep getting the warning

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

          <FlatList
            keyExtractor={(item) => item.id.toString()}
            ListHeaderComponent={<View style={{ height: 36 }} />}
            ListFooterComponent={<View style={{ height: 90 }} />}
            data={data}
            renderItem={({ item }) => (
              <View>
                <ShortCard
                  id={(item) => item.id}
                  firstName={item.firstName.en}
                  lastName={item.lastName.en}
                  memberSince={item.created}
                  customerReviewCount={item.customerReviewCount}
                  customerReviewRate={item.customerReviewRate}
                  dailyRate={
                    item.services.find(
                      ({ subcat_id }) => subcat_id === route.params.payload.id
                    ).dailyRate.iqd
                  }
                  image={item.image}
                  onPress={() => setStatex(focused === item.id ? 0 : item.id)}
                  focused={focused}
                  style={{ display: focused !== item.id ? "flex" : "none" }}
                />
                <LongCard
                  onPressClose={() => setStatex(0)}
                  style={{ display: focused === item.id ? "flex" : "none" }}
                />
              </View>
            )}
          />

My keyExtractor is working, when I remove it I get a VirtulizedList warning

EDIT / Solution

I tried adding Key prop but it didn't solve my issue, further troubleshooting I was able to isolate the issue inside the component where I had a conditional rendering of another component where I was checking a state using the &&, when I extracted that part to a variable inside the function body I was able to get rid of the warning, not sure if that was an optimal solution since the hole idea of using key is to control the refresh of dynamic content but at least I am not getting the warning anymore.

Does this answer your question? [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) — André, Apr 09 '23 at 12:16

score 1 · Accepted Answer · answered Apr 09 '23 at 12:08

The extracted key from the item should be used as the value of the "key" prop you add to both your ShortCard and LongCard components in order to resolve the warning.

Here's the updated code

<FlatList
  keyExtractor={(item) => item.id.toString()}
  ListHeaderComponent={<View style={{ height: 36 }} />}
  ListFooterComponent={<View style={{ height: 90 }} />}
  data={data}
  renderItem={({ item }) => (
    <View>
      <ShortCard
        key={item.id.toString()} // Add key prop here
        id={(item) => item.id}
        firstName={item.firstName.en}
        lastName={item.lastName.en}
        memberSince={item.created}
        customerReviewCount={item.customerReviewCount}
        customerReviewRate={item.customerReviewRate}
        dailyRate={
          item.services.find(
            ({ subcat_id }) => subcat_id === route.params.payload.id
          ).dailyRate.iqd
        }
        image={item.image}
        onPress={() => setStatex(focused === item.id ? 0 : item.id)}
        focused={focused}
        style={{ display: focused !== item.id ? "flex" : "none" }}
      />
      <LongCard
        key={`${item.id}-long`} // Add key prop here
        onPressClose={() => setStatex(0)}
        style={{ display: focused === item.id ? "flex" : "none" }}
      />
    </View>
  )}
/>

React will be able to quickly determine which child components need to be re-rendered when changes are made by passing each one a distinct key, therefore the warning should go away.

score 0 · Answer 2 · answered Jun 04 '23 at 13:44

0

You can render the header and footer as a function like so:

     ListHeaderComponent={() => <View style={{ height: 36 }} />}
     ListFooterComponent={() => <View style={{ height: 90 }} />}

answered Jun 04 '23 at 13:44

Blackfaded

291
2
10

React Native: Each child in a list should have a unique "key" prop {Conditional Rendering} *SLOVED*

2 Answers2

React Native: Each child in a list should have a unique "key" prop {Conditional Rendering} SLOVED