gave up gave up - 1 year ago 68
React JSX Question

Removing children from Array inside ScrollView always deletes last item

I have

<ScrollView horizontal={true} >
{,i) =>
<Thumb key={i} number={i} uri={uri} onDelete ={this.deleteImage.bind(this)} /> )}

Here each
class has
. Whenever I click on the image it is required to be deleted from the

My Thumb component looks like this

class Thumb extends React.Component {

this.state = {
show : false

shouldComponentUpdate(nextProps, nextState) {
return false;
render() {
return (
<View style={[styles.button ]}>

<View style={[{position:'relative'},styles.img]} >
<View style={{position:'absolute'}}>
<Image style={styles.img} source={{uri:this.props.uri.path}}/>

<View style={[styles.img , {position:'absolute',alignItems:'center',justifyContent:'center',opacity:1}]}>

<TouchableHighlight onPress = {() => {this.props.onDelete(this.props))}}>
<Icon name="close" size = {30} color="white"/>


and i'm trying to delete

// console.log(_scrollView)
// _scrollView.props.children.splice(deleteProp.number,1)
// console.log(_scrollView)
console.log(deleteProp,'prop from delete method');
console.log(this.state.images ,'before')
let images = this.state.images;
console.log(images.splice(deleteProp.number ,1),'splice data');
this.setState({images : images});
if(this.state.images.length == 0 ){

How should I achieve this?

I tried deleting the corresponding state wise Image object but its always deletes the last image of the ScrollView(or last Thumb component).

I'm new to react-native and Android I don't know this is possible with ScrollView. Please suggest me the correct method.

Answer Source

This is a pretty common issue with confusing the role keys play in Components. We think of keys just as a unique identifier for the dynamically generated components. But it also serves as a means for React to know which components need to be redrawn.

As such, I would advise changing your key to be something unique to the image itself, not the position.

<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />

Here's the official docs on keys.

The key only has to be unique among its siblings, not globally unique. As a last resort, you can pass item's index in the array as a key. This can work well if the items are never reordered, but reorders will be slow. (emphasis mine).

This is another good article about why keys are important.

Also, when you have arrays that are generating components, I like to "preload" the functions to not need indexes, ids, etc, passed up to it.

// original component
<Thumb key={i} number={i} uri={uri} onDelete={this.deleteImage.bind(this)} />
// updated function by adding index to bind params and unique key
<Thumb key={uri.path} number={i} uri={uri} onDelete={this.deleteImage.bind(this,i)} />

That way, when you want to delete you can simply call this.props.onDelete(). Just a preference but I think it's cleaner.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download