React Native редактируемый FlatList - Как редактировать данные элемента в списке? (Реагировать на родные крючки)

Question

Я новичок в реактивном родном языке, и мне нужна помощь. Я пытаюсь обработать обновление данных в FlatList. где пользователь может изменить текстовое имя на что угодно. Например, если пользователь создает папку с именем «Bar», но позже решает изменить имя на «Bar1». Как мне это сделать??? Вот мой код ...

Мое модальное состояние

const [modalVisible, setModalVisible] = useState(false);

Мой компонент FlatList ... сбросить данные = {folderToDisplay}

<FlatList numColumns={4} data={folderToDisplay} renderItem={renderItem} />

Мой renderItem = {renderItem} устанавливается так: где {itemData.item.value} здесь я выбираю свое текстовое имя. Мы можем заменить {itemData.item.value} на Bar, если вы wi sh.

    const renderItem = (itemData) => {
    return (
      <View style={styles.folderNameContainer}>
        <TouchableOpacity
          onPress={() => {
            setModalVisible(true);
          }}
        >
          <Text style={styles.itemText}>{itemData.item.value}</Text>
        </TouchableOpacity>
      </View>
    );
  };

Когда я нажимаю текстовое имя, открывается модальное окно.

<Modal animationType="fade" transparent={true} visible={modalVisible}>
        <SimpleModal
          closeModal={onCloseModal}
        />
      </Modal>

... И когда я нажимаю «Отмена», закройте его.

const onCloseModal = () => {
    setModalVisible(false);
  };

Мой компонент SimpleModal настроен так: я мог бы сделать свой код все в одном месте, но это выглядело некрасиво.

const SimpleModal = (props) => {
  return (
    <View style={styles.centeredView}>
      <View style={styles.modalView}>
        <Text style={styles.modalText}>Change Name!</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Type Here..."
          maxLength={15}
        />
        <View style={styles.saveAndCancelContainer}>
          <View style={styles.button}>
            <Button title="Save" color="#87CEEB" onPress={props.renameFolder} />
          </View>
          <View style={styles.button}>
            <Button title="Cancel" color="red" onPress={props.closeModal} />
          </View>
        </View>
      </View>
    </View>
  );
};

Теперь цель в моем TextInput, пользователь вводит новое имя и затем нажимает Сохранить. Когда OnPress будет обновлять имя для нового имени. и закройте модал. Пока это то, что у меня есть:

<Modal animationType="fade" transparent={true} visible={modalVisible}>
        <SimpleModal
          renameFolder={handleRenameFolder}
        />
      </Modal>

const handleRenameFolder = () => {
    ///....????
    setModalVisible(false);
  };