title: How to allow text input in list item using react native?
body: <p>This question relates to React Native specifically the text input component. I wanted to create an app which allows users to select a number of people from their contacts and based on their selection, create a list with text input each beside them. From there, they are able to do text input and with the onChangeText function, changes the state of a particular key.</p>
  
  <p>Below is the code that I have attempted. I tried to change the state of percent inside the prop which I believe is incorrect since all elements will share the same text input.</p>
  
  <p>By doing so, whenever I made a text input to one field, the text input will erase subsequently.</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          selected2: undefined,
          description: "",
          amount: "",
          notes: "",
          percent: {},
          selectedContacts:
              this.props.navigation.state.params.selectedContacts,
      };
  }
  
  const SelectedList = (props) =&gt; {
  
      const list = ({ allContacts }) =&gt; {
          if (allContacts) {
              return allContacts.map((item) =&gt; {
                  return (
                      &lt;ListItem key={item.id}&gt;
                          &lt;Body&gt;
                              &lt;Text&gt;{`${item.first_name}`}&lt;/Text&gt;
                              &lt;Text note&gt;{`${item.phone_number}`}&lt;/Text&gt;
                          &lt;/Body&gt;
                          &lt;Right&gt;
                              &lt;Item&gt;
                                  &lt;Input
                                      placeholder="0"
                                      maxLength={3}
                                      onChangeText={(percent) =&gt; {
                                          this.setState({percent});
                                      }}
                                  /&gt;
                                  &lt;Text&gt;%&lt;/Text&gt;
                              &lt;/Item&gt;
                          &lt;/Right&gt;
                      &lt;/ListItem&gt;
                  )
              })
          }
      }
  
      &lt;SelectedList
          allContacts={this.state.selectedContacts}
      /&gt;
  </code></pre>
  
  <p>I hope to achieve is that after selecting the number of contacts and transferring the array data, I want the array to be printed out and the text input of each list item to be independent of each other.</p>
  
  <p>Any feedback and advice are welcome and I really appreciate for you to spending time reading my query and helping me with my problem. Thank you!</p>