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

Created on 15 Feb 2019  路  1Comment  路  Source: callstack/react-native-paper


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(
(
)
)
})

return( {fruitsChips}
)
}
```

Your Environment

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

Most helpful comment

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

>All comments

fruits.map(fruit => (
  <Chip onPress={() => console.log('Pressed', fruit.id)}>
    {fruit.name}
  </Chip>
));
Was this page helpful?
0 / 5 - 0 ratings