Кто-нибудь знает, почему эта функция deleteItem не работает в Press?

Question

Я не могу заставить этот deleteItem работать. Все выглядит хорошо, и в нем записано, что он получает опору, но элемент не удаляется при нажатии. Любая помощь будет принята с благодарностью!

Приложение. js:

const App = () => {

  const [item, setItems] = useState([
    {
      id: uuidv4(),
      name: ''
    },
  ]);

  const addItems = (text) => {

    if (!text) {
      Alert.alert('Error', "How can I add something thats not there??", { text: 'ok' })
    } else {
      setItems(prevItems => {
        return [{ id: uuidv4(), name: text }, ...prevItems]

      })
    }
  }

  const deleteItem = (id) => {
    setItems((prev) => {
      return prev.filter(item => item.id !== id)

    })
    console.log('working');
  }


  return (
    <View style={styles.container}>
      <ImageBackground source={background} style={styles.image}>
        <Header
          title="Gotta get this done!" />
        <AddItem
          addItem={addItems}
        />
        <FlatList
          data={item}
          renderItem={({ item }) => {
            if (item.name === null) {
              return (
                <Prompt />
              )
            } else {
              return (
                <ListItem item={item.name} deleteItem={deleteItem} />
              )
            }
          }}
        />
      </ImageBackground>
    </View>
  )
};

Вот мой ListItem компонент. Я передаю опору deleteItem и называю ее ниже:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
// import Icon from 'react-native-vector-icons/dist/FontAwesome';

const ListItem = ({ item, deleteItem }) => {


    return (

        <View style={styles.listItem}>
            <View style={styles.listItemView}>
                <Text style={styles.itemText}>{item}</Text>
            </View>
            <View style={styles.button}>
                <TouchableOpacity onPress={() => deleteItem(item.id)}>
                    <Text>Remove</Text>
                </TouchableOpacity>
            </View>
        </View>
    )

};

Answer 1

<ListItem item={item.name} deleteItem={deleteItem} />

Вы передаете свойство name как item. Вероятно, вы хотели передать сам элемент:

<ListItem item={item} deleteItem={deleteItem} />

Не забудьте затем получить доступ к свойству .name в компоненте ListItem:

const ListItem = ({ item, deleteItem }) => {
    return (
        <View style={styles.listItem}>
            <View style={styles.listItemView}>
                <Text style={styles.itemText}>{item.name}</Text>
                                            {/*   ^^^^  */}
            </View>
            <View style={styles.button}>
                <TouchableOpacity onPress={() => deleteItem(item.id)}>
                    <Text>Remove</Text>
                </TouchableOpacity>
            </View>
        </View>
    )
};

EDIT: как указано в комментариях , вот компонент с PropTypes, который выведет в консоли ошибку для версии, указанной в вашем вопросе:

import PropTypes from 'prop-types'

const ListItem = // ...

ListItem.propTypes = {
  item: PropTypes.shape({
    name: PropTypes.string
    id: PropTypes.string
  }).isRequired,
  deleteItem: PropTypes.func.isRequired
}