Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 828 of the free egghead.io lessons, plus get React content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Add a Remove Item Button to Each Row with React Native TouchableOpacity

1:48 React lesson by

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

We'll use TouchableOpacity to create a Remove button for each todo item. We'll demonstrate how to create remove items from a ListView.DataSource

We'll start by importing TouchableOpacity from React native. We'll then render a touchable opacity after our text, then add some text, which we'll just give it an X.

Then, give it a style of style=styles.destroy, and we will go create our destroy style. Let's say destroy, which is an object, and we'll say fontSize of 20, and color of #cc9a9a. Now when we go and we refresh, and we type an item, you can see that an X shows up that is pressable.

Now, we'll wire up our button, we'll add an onPress={this.props.onRemove}, go back to our app, and we'll go add a handleRemoveItem, which will just take a key. We'll then say const newItems = this.state.items.filter(), we'll say item, passing in our arrow function, and then, we'll return item.key doesn't equal key.

Now, we'll call this.setSource, pass in newItems, and newItems, then, we'll bind this.handleRemove(item)=this.handleRemove.bind(this); then scroll down to our row render, and we'll say onRemove = an arrow function, and call this.handle RemoveItem, pass in our key.

Now when we go and we refresh, when we add an item we can now remove that item from the list


HEY, QUICK QUESTION!
Joel's Head
Why are we asking?