TextInput inside a FlatList

Question

Description

From the sample code below, the FlatList returns n-number of TextInput, when a value is entered on a particular TextInput it keeps re-rendering every other TextInput.

Sample Code

<FlatList
    ...........
    renderItem ={this.renderItem}
/>

renderItem=(item)=>{

   <Text>{item.name}</Text>
   <TextInput
   .........
   onChangeText ={(text)=>this.setState({text})}
   value={this. state.text}
/>

}

Solution

I have tried to assign a key to the TextInput but don't know how to go avout it

Answer 1

Update : Added Complete Example

You need to maintain textinputs state as an array to store the values for each textinput

import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  TextInput,
} from 'react-native';

export class Demo extends Component {
  state = {
    textInputs: [],
  };

  render() {
    return (
      <View style={{ flex: 1, marginTop: 20 }}>
        <FlatList
          style={{ flex: 1 }}
          data={[1, 2, 3, 4, 5]}
          renderItem={({ item, index }) => {
            return (
              <View
                style={{
                  height: 100,
                  backgroundColor: '#F0F0F0',
                  width: 300,
                  alignSelf: 'center',
                  margin: 10,
                }}
              >
                <TextInput
                  style={{
                    flex: 1,
                    backgroundColor: '#C0C0C0',
                  }}
                  onChangeText={text => {
                    let { textInputs } = this.state;
                    textInputs[index] = text;
                    this.setState({
                      textInputs,
                    });
                  }}
                  value={this.state.textInputs[index]}
                />
                <TouchableOpacity
                  style={{
                    backgroundColor: 'red',
                    flex: 1,
                    alignItems: 'center',
                    justifyContent: 'center',
                  }}
                  onPress={() => {
                    let { textInputs } = this.state;
                    textInputs[index] = '';
                    this.setState({
                      textInputs,
                    });
                  }}
                >
                  <Text> Clear</Text>
                </TouchableOpacity>
              </View>
            );
          }}
        />
      </View>
    );
  }
}

Answer 2

Just remove value attribute from your TextInput , but this is not the solution as the value is stores into single state only, so if you want to get value of multiple textinputs you have to create rowrender and array of states

<TextInput
    .........
    onChangeText ={(text)=>this.setState({text})}
    //value={this. state.text}
/>