0

I am trying to create a pin lock screen. The problem occured in the num pads section.it said "Each child in a list should have a unique "key" prop." I have no idea what's wrong with my code.

here is my list for the number pads.

render() {
        let numberPads = [
            {id: 1,value: '1', style: styles.numPad},
            { id: 2,value: '2', style: styles.numPad },
            { id: 3,value: '3', style: styles.numPad },
            { id: 4,value: '4', style: styles.numPad },
            { id: 5,value: '5', style: styles.numPad },
            { id: 6,value: '6', style: styles.numPad },
            { id: 7,value: '7', style: styles.numPad },
            { id: 8,value: '8', style: styles.numPad },
            { id: 9,value: '9', style: styles.numPad },
            { id: 10,value: '', style: styles.keyPad },
            { id: 11,value: '0', style: styles.numPad },
            { id: 12,value: '11', style: styles.keyPad }
        ]
        return (........) }

here is how the number pads above is rendered.

render(){
   ......
   return(
   .....
   <View style={styles.numPadContainer}>
     {numberPads.map(numberPad => {
             let numPad = numberPad.id != 12 ?
                   <TouchableOpacity style={numberPad.style} key={numberPad.id}
                    onPress={() => this.onPressNumberPad(numberPad.value)}
                    >
                        <Text style={styles.numText} >{numberPad.value}</Text>
                   </TouchableOpacity> :
                   <TouchableOpacity style={numberPad.style} key={numberPad.id}
                    onPress={() => this.onPressDeletePad()}
                    >
                         <Image  source={require('../assets/images/clear-icon-50px.png')} />
                    </TouchableOpacity>
                    return (
                             numPad
                    )
       })}
    </View>
    ......
    )
}
SpellScripter
  • 5
  • 1
  • 4

4 Answers4

0

The children in the TouchableOpacity must have a key props too.

You can find more information in this post.

docmurloc
  • 1,201
  • 4
  • 11
0

Each Flatlist item must have unique identity to avoid duplicity

Use keyExtractor property of Flatlist, it will resolve your issue

<FlatList 
    data={ props.data }
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item}) => <Item tittle = { item }  />}
/>
Antier Solutions
  • 1,326
  • 7
  • 10
0
render(){
   ......
   return(
   .....
   <View style={styles.numPadContainer}>
     {numberPads.map((numberPad,index) => {
             let numPad = numberPad.id != 12 ?
                   <TouchableOpacity style={numberPad.style} key={numberPad.id.toString()}
                    onPress={() => this.onPressNumberPad(numberPad.value)}
                    >
                        <Text style={styles.numText} >{numberPad.value}</Text>
                   </TouchableOpacity> :
                   <TouchableOpacity style={numberPad.style} key={numberPad.id.toString()}
                    onPress={() => this.onPressDeletePad()}
                    >
                         <Image  source={require('../assets/images/clear-icon-50px.png')} />
                    </TouchableOpacity>
                    return (
                             numPad
                    )
       })}
    </View>
    ......
    )
}
Arjun Ramdas
  • 185
  • 3
  • 13
0

Your code above is no problem, I think. It may have in another place in your code that you didn't show all. Check your code again or show all the error log here.

Dominico Tung
  • 54
  • 1
  • 5
  • Yes you're right. I happened to have another map() in my code. after a careful error log examination, I've found that the warning indicated to that map() instead of this one. Thank you so much. – SpellScripter Apr 02 '21 at 03:23