How to get a key for chip onPress or onClose in react-native-paper?

[rgouzal]

Current behaviour

I am not sure if there is a workaround for this or not but when clicking on the close button for a chip component within list of components I am not able to get an id or key to know which component was removed or target to remove.

Expected behaviour

When user clicks on a close button for a chip, the onClose should return an id for chip component to know which item should be removed.

Code sample

Screenshots (if applicable)

What have you tried

I tried the below code where user enters on a TextInput component a label and click on add button to add a chip component to list of chips that is shown to user.

addFruit = () => {
  const { currentFruit, fruits } = this.state;
  console.log("Adding fruit ... ")
  fruits.push({ name: currentFruit});
  this.setState({fruits: fruits, currentFruit: ""});
  alert("Fruit was added to list of chosen fruits!");
}

render() {
const { fruits } = this.state;
  const fruitsChips = []
  fruits.map((fruit) => {
    fruitsChips.push(
      (<View style={{ margin: 2 }}>
        <Chip onClose={() => {}} mode="flat" style={{ alignSelf: 'baseline' }}>{fruit.name}</Chip>
      </View>)
    )
  })

return(<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{fruitsChips}
</View>)
}

Your Environment

software	version
ios or android
react-native	0.57.8
react-native-paper	2.5.0
node
npm or yarn
expo sdk

[satya164]

fruits.map(fruit => (
  <Chip onPress={() => console.log('Pressed', fruit.id)}>
    {fruit.name}
  </Chip>
));