React Native My delete button does not work

Question

My code seems to be good but I do not understand why it is just doing nothing when I hit the "X" look at the code below please and help me out!

import React, { useState } from 'react';enter code here
import { StyleSheet, FlatList, Text, View, Image, TextInput, Button, Keyboard, TouchableOpacity, CheckBox } from 'react-native';
import Interactable from 'react-native-interactable';
export default function App() {
  const [enteredGoal, setEnteredGoal] = useState('');
  const [courseGoals, setCourseGoals] = useState([]);


  const goalInputHandler = (enteredText) => {
    setEnteredGoal(enteredText);
  };
  const addGoalHandler = () => {
    if (enteredGoal.length > 0) {
      setCourseGoals(currentGoals => [...currentGoals, enteredGoal])
    } else {
      alert("You have to write something!")
    }
  }
  const deleteItem = idx => {
    const clonedGoals = [...courseGoals]
    courseGoals.splice(idx, 1)
    setCourseGoals(courseGoals)
}

  return (
<View style={styles.container}>
  <View style={styles.topPart}></View>
  <View style={styles.navBar}>
    <Image source={require('./assets/baseline_menu_black_18dp.png/')} />
    <Text style={styles.heading}> Grocery List </Text>
  </View>
  <View style={styles.body}>
    <TextInput
      style={styles.textInput}
      placeholder='Groceries'
      maxLength={20}
      onBlur={Keyboard.dismiss}
      value={enteredGoal}
      onChangeText={goalInputHandler}
    />

    <View style={styles.inputContainer}>
      <TouchableOpacity style={styles.saveButton}>
        <Button title="ADD" onPress={addGoalHandler} color="#FFFFFF" style={styles.saveButtonText} />
      </TouchableOpacity>
    </View>
    <View style={styles.container}>
      <FlatList

        data={courseGoals}
        renderItem={(itemData, idx) => (
          <View style={styles.groceryItem} >
            <Text style={styles.groceryItemText}>{itemData.item}</Text>
            <Text style={styles.groceryItemDelete} onPress={() => deleteItem(idx)}>X</Text>
          </View>
        )}


      />
    </View>
  </View>
</View>

  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,

  },
  topPart: {
    height: '3%',
    backgroundColor: '#5498A7',
  },
  navBar: {
    height: '10%',
    backgroundColor: '#5498A7',
    elevation: 3,
    paddingHorizontal: 15,
    flexDirection: 'row',
    alignItems: 'center',

  },
  body: {
    backgroundColor: '#edebe9',
    height: '100%',
    flex: 1
  },
  heading: {
    fontWeight: "bold",
    justifyContent: 'center',
    paddingLeft: '13%',
    fontSize: 25,
    color: '#d6d4d3'
  },
  textInput: {
    borderColor: '#CCCCCC',
    borderTopWidth: 1,
    borderBottomWidth: 1,
    height: 50,
    fontSize: 25,
    paddingLeft: 20,
    paddingRight: 20
  },
  saveButton: {
    borderWidth: 1,
    borderColor: '#5498A7',
    backgroundColor: '#5498A7',
    padding: 15,
    margin: 5,
  },
  saveButtonText: {
    color: '#FFFFFF',
    fontSize: 20,
    textAlign: 'center'
  },
  groceryItem: {
borderWidth: 1,
borderColor: 'black',
backgroundColor: '#6A686B',
padding: 15,
margin: 5,
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between'
  },
  groceryItemText: {
    color: '#d6d4d3',

  },
  groceryItemDelete: {
    color: 'red',
    fontWeight: 'bold',
    fontSize: 20
  }
});

I am just a beginner and am trying to figure out how to make this work better, if you have an idea please say how to fix it I would really appreciate it. This is a project I am doing just to get started with the learning process but this has been taking a bit longer than expected. Thank you!

Answer 1

You can use ES2015 to achieve it in fewer lines, update your delete function like this:

  const deleteItem = element => {
    const clonedGoals = courseGoals.filter((item) => item !== element);
    setCourseGoals(clonedGoals);
}

also update your onPress instead of passing index pass the item itself like this

onPress={() => deleteItem(itemData.item)}

Answer 2

I guess you have to change deleteItem function as following.

const deleteItem = idx => {
    const clonedGoals = [...courseGoals]
    clonedGoals.splice(idx, 1)
    setCourseGoals(clonedGoals)
}

You have to replace courseGoals with clonedGoals