Deleting row from a list with custom Listview

Question

I want to be able to remove a row from my custom listview by adding an 'x' button to the row item. I cant seem to figure out how to do this. I'm trying to pass a function to the row and delete the index, but I'm not sure how to do it. I'm relatively new to js.

Is there another way or a node I can use to do this?

How can the row pass data to deleteData? Right now the index parameter is not actually the index.

row.js

const CustomRow = ({ title, description, image_url, handleRemovePress }) => (
<View style={styles.container}>
    <Image source={{ uri: image_url }} style={styles.photo} />
    <View style={styles.container_text}>
        <Text style={styles.title}>
            {title}
        </Text>
        <Text style={styles.description}>
            {description}
        </Text>
        <TouchableOpacity onPress={handleRemovePress} style={styles.removeButton}>
          <Text style={styles.removeButtonText}>X</Text>
        </TouchableOpacity>
    </View>
 </View>
);

customListview.js

const CustomListview = ({ itemList }) => (
    <View style={styles.container}>
        <FlatList
                data={itemList}
                extraData={itemList}
                renderItem={({ item }) => <CustomRow
                    title={item.title}
                    description={item.description}
                    image_url={item.image_url}
                    handleRemovePress={item.handleRemovePress}
                />}
            />
    </View>
);

screen.js

constructor(props) {
super(props);
this.array = [
  {
    key: '1', 
    title: 'Exercise A',
    description: 'Lorem ipsum',
    image_url: '', 
    handleRemovePress: this.deleteData
  },
],
  this.state = {
    arrayHolder: [],
      textInput_Holder: ''
      }
  }

  deleteData(index){
       this.array.splice(index, 1);
        this.setState({ arrayHolder: [...this.array] })
      }
  render() {
    return (
      <View style={styles.container}>       
      <CustomListview
        itemList={this.state.arrayHolder}/>
     </View>
    );
  }

Answer 1

Try this on screen.js :

Edited:

     constructor(props) {
          super(props);

            array = [
            {
              key: '1', 
              title: 'Exercise A',
              description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
              image_url: 'https://www.sivananda.at/images/ueber-uns/swami_vishnudevananda_portait.jpg', 
              handleRemovePress: this.deleteData
            },
          ]
            state = {
              arrayHolder: this.array,


                textInput_Holder: ''
                }

             deleteData = (index) =>{
               let tempArray = this.state.arrayHolder
               tempArray.splice(index, 1);
              this.setState({arrayHolder: tempArray})
            }

            render(){
              return <CustomListview itemList={this.state.arrayHolder}/>
            }
          }