I want to map key value pairs in react native. The value being editable text entry. The mapped ponents show up fine, but when I try to edit the TextInput, the keyboard disappears when i type the first letter. Don't know whats causing the problem.

If i just put a TextInput in the parent element, it works absolutely fine but doesn't work when I use the map function.

 <View style={styles.main}>
        <View>
            {this._getDetailElements()}
        </View>
 </View>

_getDetailElements() function

 _getDetailElements = () => {

    return Object.keys(this.state.data).map(elem => (
        <View key={shortid.generate()} style={styles.element}>
                <TextInput
                editable={this.state.editable}
                onChangeText={text => this.setState({seletedText: text})}
                value={this.state.selectedText}
                /> 
        </View>
    )
    );
}

I want to map key value pairs in react native. The value being editable text entry. The mapped ponents show up fine, but when I try to edit the TextInput, the keyboard disappears when i type the first letter. Don't know whats causing the problem.

If i just put a TextInput in the parent element, it works absolutely fine but doesn't work when I use the map function.

 <View style={styles.main}>
        <View>
            {this._getDetailElements()}
        </View>
 </View>

_getDetailElements() function

 _getDetailElements = () => {

    return Object.keys(this.state.data).map(elem => (
        <View key={shortid.generate()} style={styles.element}>
                <TextInput
                editable={this.state.editable}
                onChangeText={text => this.setState({seletedText: text})}
                value={this.state.selectedText}
                /> 
        </View>
    )
    );
}

• javascript
• react-native

• 1 you have used shortid.generate() which will generate new key everytime and hence the ponent was getting re-rendered. – j10 Commented Apr 23, 2020 at 8:27

2 Answers 2

It's because your key on the map changes everytime it rerenders. Just use the index of the map iteration as key

_getDetailElements = () => {

    return Object.keys(this.state.data).map((elem, index) => (
        <View key={index} style={styles.element}>
                <TextInput
                editable={this.state.editable}
                onChangeText={text => this.setState({seletedText: text})}
                value={this.state.selectedText}
                /> 
        </View>
    )
    );
}

i think you should just change the value to defaultValue Like this :

    <TextInput
        editable={this.state.editable}
        onChangeText={text => this.setState({seletedText: text})}
        defaultValue={this.state.selectedText}
    />

Good luck