How can i solve uniqe key prop problem in React native

Question

I have React Native project and when i try to build my phone, i'm getting this error message. Warning: Each child in an array or iterator should have a unique "key" prop. But it works on computer emulator.

Here is json data: http://hazir.net/api/match/today

and here is my codes,

import React from 'react';
import { FlatList, ActivityIndicator, Text, View  } from 'react-native';

export default class Matches extends React.Component {

  constructor(props){
    super(props);
    this.state ={ isLoading: true}
  }

  componentDidMount(){
    return fetch('http://hazir.net/api/match/today')
      .then((response) => response.json())
      .then((responseJson) => {

        this.setState({
          isLoading: false,
          dataSource: responseJson,
        }, function(){

        });

      })
      .catch((error) =>{
        console.error(error);
      });
  }



  render(){

    if(this.state.isLoading){
      return(
        <View style={{flex: 1, padding: 20}}>
          <ActivityIndicator/>
        </View>
      )
    }

    return(
      <View style={{flex: 1, paddingTop:20}}>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <Text>{item.matchId}, {item.matchDate}</Text>}
          keyExtractor={({id}, index) => id}
        />
      </View>
    );
  }
}

Possible duplicate of [React - Each child in an array or iterator should have a unique "key" prop](https://stackoverflow.com/questions/37651660/react-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop) — Mohamed Sameer, Dec 22 '18 at 10:04

Andrew · Accepted Answer · 2018-12-22T10:56:59.747

The easiest solution would be to update your keyExtractor as it appears to not be working. It doesn't look like your data has an id property, however it does have a matchId property. This means you could do something like the following.

<FlatList
 ...
 keyExtractor={({matchId}, index) => matchId.toString()}
/>

Alternatively you could use the index as the key and do this

<FlatList
 ...
 keyExtractor={({matchId}, index) => index.toString()}
/>

How can i solve uniqe key prop problem in React native

1 Answers1