Remove dynamically added view component - react-native

Question

I have a component that allow user to press on "Add" button to dynamically add View component. I have managed to do the adding but how i can improve the code to remove dynamically added view component?
import React, { Component } from 'react';
import {
View,
Text, Platform,
StyleSheet,
TouchableOpacity,
Animated,
ScrollView,
Image,
Button
} from 'react-native';
export default class App extends Component<{}>
{
constructor()
{
super();
this.state = { valueArray: [], disabled: false }
this.index = 0;
this.animatedValue = new Animated.Value(0);
}
addMore = () =>
{
this.animatedValue.setValue(0);
let newlyAddedValue = { index: this.index }
this.setState({ disabled: true, valueArray: [ ...this.state.valueArray, newlyAddedValue ] }, () =>
{
Animated.timing(
this.animatedValue,
{
toValue: 1,
duration: 500,
useNativeDriver: true
}
).start(() =>
{
this.index = this.index + 1;
this.setState({ disabled: false });
});
});
}
render()
{
const animationValue = this.animatedValue.interpolate(
{
inputRange: [ 0, 1 ],
outputRange: [ -59, 0 ]
});
let newArray = this.state.valueArray.map(( item, key ) =>
{
if(( key ) == this.index)
{
return(
<Animated.View key = { key } style = {[ styles.viewHolder, { opacity: this.animatedValue, transform: [{ translateY: animationValue }] }]}>
<Text style = {styles.text}>Row { item.index }</Text>
<Button style={styles.button}>
<Text style = {styles.text}>Remove</Text>
</Button>
</Animated.View>
);
}
else
{
return(
<View key = { key } style = { styles.viewHolder }>
<Text style = { styles.text }>Row { item.index }</Text>
<Button style={styles.button}>
<Text style = {styles.text}>Remove</Text>
</Button>
</View>
);
}
});
return(
<View style = { styles.container }>
<ScrollView contentContainerStyle = { this.scrollViewStyle }>
<View style = {{ flex: 1, padding: 4 }}>
{
newArray
}
</View>
</ScrollView>
<TouchableOpacity activeOpacity = { 0.8 } style = { styles.btn } disabled = { this.state.disabled } onPress = { this.addMore }>
<Image source = { require('./assets/add.png') } style = { styles.btnImage }/>
</TouchableOpacity>
</View>
);
}
}

Answer 1

You just need to remove it from the this.state.valueArray. If you know which index you want to remove you can do it as;
removeItem = (index) => {
this.setState(prevState => ({
valueArray: prevState.valueArray.splice(index, 1),
}));
}
Here, you are basically taking an index, create a new array from the previous one without said index and update the state.