React Native Text Input "Each child in a list should have a unique "key" prop."

Question

When I run this code in my Expo project, i get the following error:

Warning: Each child in a list should have a unique "key" prop. Check the render method of AddParticipant. Can someone hep me here please ?

import React, { Component } from 'react';
import { View, TextInput, Button, StyleSheet } from 'react-native';


class AddParticipant extends Component {

  constructor(props){
    super(props);
    this.state = {
      textInput : [],
      inputData : []
    }
  }

  //function to add TextInput dynamically
  addTextInput = (index) => {
    var name_id = " First Name & Last Name" + " " +(index +1 );
    let textInput = this.state.textInput;
    textInput.push(<TextInput  style={styles.textInput} placeholder={name_id}
      onChangeText={(text) => this.addValues(text, index)} />
      );      
    this.setState({ textInput });
  }

  //function to remove TextInput dynamically
  removeTextInput = () => {
    let textInput = this.state.textInput;
    let inputData = this.state.inputData;
    textInput.pop();
    inputData.pop();
    this.setState({ textInput,inputData });
  }

  //function to add text from TextInputs into single array
  addValues = (text, index) => {
    let dataArray = this.state.inputData;
    let checkBool = false;
    if (dataArray.length !== 0){
      dataArray.forEach(element => {
        if (element.index === index ){
          element.text = text;
          checkBool = true;
        }
      });
    }
    if (checkBool){
    this.setState({
      inputData: dataArray
    });
  }
  else {
    dataArray.push({'text':text,'index':index});
    this.setState({
      inputData: dataArray
    });
  }
  }

  //function to console the output
  getValues = () => {
    console.log('Data',this.state.inputData);
  }


  render(){
    return(
      <View>
        <View style= {styles.row}>
          <View style={{margin: 10}}>
        <Button title='Add Participant' onPress={() => this.addTextInput(this.state.textInput.length)} />
        </View>
        <View style={{margin: 10}}>
        <Button title='Remove Participant' onPress={() => this.removeTextInput()} />
        </View>
        </View>
        {this.state.textInput.map((value) => {
          return value
        })}
        <Button title='Save The Participants' onPress={() => this.getValues()} />

      </View>
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  buttonView: {
  flexDirection: 'row'
  },
  textInput: {
  height: 40,
  borderColor: 'black', 
  borderWidth: 1,
  margin: 20
},
row:{
  flexDirection: 'row',
  justifyContent: 'center'
  },
});

export default AddParticipant;

Chirag Jain Chirag Jain · Accepted Answer · 2021-04-11T09:55:40

The that you're returning must have some key associated. i.e. you must provide a key for every component.

Here's what you can do,

addTextInput = (index) => {
    var name_id = " First Name & Last Name" + " " +(index +1 );
    var key = index; // add this statement in the code. It'll remove the warning 
    let textInput = this.state.textInput;
    textInput.push(<TextInput key={key} style={styles.textInput} placeholder={name_id}
      onChangeText={(text) => this.addValues(text, index)} />
      );      
    this.setState({ textInput });
  }

React Native Text Input "Each child in a list should have a unique "key" prop."

1 Answers