title: React Native editable FlatList How to edit item data
body: <p>React Native editable FlatList – How to edit item data in a List? </p>
  
  <p>Hi code community, I am new in reactive native and I need some help. I am trying to handle a data update in FlatList. where the user can change the text name for whatever they want. Exemplo if the user creates a folder named "Bar" but later on decides to change the name for "Bar1". How can I do it??? Here is my code so far...</p>
  
  <p>My Modal State </p>
  
  <pre><code>const [modalVisible, setModalVisible] = useState(false);
  </code></pre>
  
  <p>My FlatList Component... discard data={folderToDisplay}</p>
  
  <pre><code>&lt;FlatList numColumns={4} data={folderToDisplay} renderItem={renderItem} /&gt;
  </code></pre>
  
  <p>My renderItem={renderItem} is set like this: where {itemData.item.value} is here I am fetching my text name. We can replace {itemData.item.value} to Bar if you wish.</p>
  
  <pre><code>    const renderItem = (itemData) =&gt; {
      return (
        &lt;View style={styles.folderNameContainer}&gt;
          &lt;TouchableOpacity
            onPress={() =&gt; {
              setModalVisible(true);
            }}
          &gt;
            &lt;Text style={styles.itemText}&gt;{itemData.item.value}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
      );
    };
  </code></pre>
  
  <p>When I press the text name a Modal opens.</p>
  
  <pre><code>&lt;Modal animationType="fade" transparent={true} visible={modalVisible}&gt;
          &lt;SimpleModal
            closeModal={onCloseModal}
          /&gt;
        &lt;/Modal&gt;
  </code></pre>
  
  <p>...And when I press cancel it close.</p>
  
  <pre><code>const onCloseModal = () =&gt; {
      setModalVisible(false);
    };
  </code></pre>
  
  <p>My SimpleModal component is set like this: I could make my code all in one place but it looks ugly.</p>
  
  <pre><code>const SimpleModal = (props) =&gt; {
    return (
      &lt;View style={styles.centeredView}&gt;
        &lt;View style={styles.modalView}&gt;
          &lt;Text style={styles.modalText}&gt;Change Name!&lt;/Text&gt;
          &lt;TextInput
            style={styles.textInput}
            placeholder="Type Here..."
            maxLength={15}
          /&gt;
          &lt;View style={styles.saveAndCancelContainer}&gt;
            &lt;View style={styles.button}&gt;
              &lt;Button title="Save" color="#87CEEB" onPress={props.renameFolder} /&gt;
            &lt;/View&gt;
            &lt;View style={styles.button}&gt;
              &lt;Button title="Cancel" color="red" onPress={props.closeModal} /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>Now the goal here is in my TextInput the user type a new name and then press Save. When onPress it will update the name for the new name. and close the modal. So far this is what I have:</p>
  
  <pre><code>&lt;Modal animationType="fade" transparent={true} visible={modalVisible}&gt;
          &lt;SimpleModal
            renameFolder={handleRenameFolder}
          /&gt;
        &lt;/Modal&gt;
  
  const handleRenameFolder = () =&gt; {
      ///....????
      setModalVisible(false);
    }; 
  </code></pre>