title: set Multiple state Id for custom component in React Native
body: <p>I have implemented custom inputBox component. So When I am using this component first time then it is working fine and when I am using multiple time in one page then data is prepopulate to next component.</p>
  <p>Custom component:</p>
  <pre><code>import React, { createRef } from 'react';
  
  import {
      View,
      TextInput,
      Alert,
      Text,
      StyleSheet
  } from &quot;react-native&quot;;
  
  class BoxInput extends React.Component {
      constructor(props) {
  
          super(props)
          this.state = {
              digit1: '',
              digit2: '',
              digit3: '',
              ...props
          }
          this.digit1Ref = createRef()
          this.digit2Ref = createRef()
          this.digit3Ref = createRef()
      }
      componentDidMount() {
          this.digit1Ref.current.focus()
      }
  
      componentDidUpdate(prevProps) {
          if (this.state.digit1 &amp;&amp; this.state.digit2 &amp;&amp;
              this.state.digit3
             
      }
      saveText(text, key) {
          this.setState({ ...this.state, [key]: text }, () =&gt; {
              if (text) {
                  key == 'digit1' ? this.digit2Ref.current.focus() : null
                  key == 'digit2' ? this.digit3Ref.current.focus() : null
                  key == 'digit3'
              }
              const boxInputValue = this.state.digit1 + this.state.digit2 + this.state.digit3
              this.props.onBoxInput(boxInputValue)
          });
  
      }
      render() {
          return (
              &lt;&gt;
                  &lt;TextInput maxLength={1} keyboardType={'numeric'} ref={this.digit1Ref} style={styles.boxStyle} value={this.state.digit1} onChangeText={(text) =&gt; this.saveText(text, 'digit1')} /&gt;
                  &lt;TextInput maxLength={1} keyboardType={'numeric'} ref={this.digit2Ref} style={styles.boxStyle} value={this.state.digit2} onChangeText={(text) =&gt; this.saveText(text, 'digit2')} /&gt;
                  &lt;TextInput maxLength={1} keyboardType={'numeric'} ref={this.digit3Ref} style={styles.boxStyle} value={this.state.digit3} onChangeText={(text) =&gt; this.saveText(text, 'digit3')} /&gt;
         
              &lt;/&gt;
          )
      }
  }
  const styles = StyleSheet.create({
      boxStyle: {
          marginTop: 20,
          height: 57,
          width: 50,
          borderRadius: 10,
          borderWidth: 1,
          borderColor: '#F1F5F9',
          backgroundColor: '#F1F5F9',
          fontSize: 20,
          lineHeight: 40,
          paddingHorizontal: 15,
          textAlign: 'center'
      }
  })
  export default BoxInput;
  </code></pre>
  <hr />
  <pre><code> import React, { createRef } from 'react';
      import styles from './style';
      import {
          View,
          TextInput,
          Alert
      } from &quot;react-native&quot;;
      import { connect } from &quot;react-redux&quot;;
      import * as Animatable from 'react-native-animatable';
      import BoxInput from &quot;../../../../md-components/atoms/boxinput&quot;
      
      class MPINScreen extends React.Component {
      
          constructor(props) {
              super(props)
              this.state = {
                  confirmMpinEnable: true,
                  ...props
              }
              this.codes = [{
                  value: '+91',
              }]
          }
      
          componentDidUpdate(prevProps) {
              if (this.state.mpinValue.split(&quot;&quot;).length == 3 &amp;&amp;
                  prevProps.success_msg != this.props.success_msg &amp;&amp; this.props.success_msg == 'verified') {
                  NavigationService.navigate(this.props.navigation, 'MPINVerifyOnboarding')
              }
          }
          handleSubmit = () =&gt; {
              if (this.state.mpinValue != this.state.confirmMpinValue) {
                  Alert.alert(
                      &quot;Error&quot;,
                      &quot;MPIN is not machted&quot;,
                      [
                          { text: &quot;OK&quot; }
                      ],
                      { cancelable: false }
                  );
              } else {
                  this.props.verifyMpin({
                      &quot;mpin&quot;: this.state.mpinValue,
                      phoneNumber: this.props.mobileNumber
                  })
      
              }
          }
          mpinConfirmation = () =&gt; {
              if (this.state.mpinValue.split(&quot;&quot;).length != 6) {
                  Alert.alert(
                      &quot;Error&quot;,
                      &quot;Please insert 6 digit mpin&quot;,
                      [
                          { text: &quot;OK&quot; }
                      ],
                      { cancelable: false }
                  );
      
              }else{
                  this.setState({
                      confirmMpinEnable: false,
                  });
              }
             
          }
       
          mpinText = (args) =&gt; {
              this.setState({
                  mpinValue: args,
              });
          }
          confirmMpinText = (args) =&gt; {
              this.setState({
                  confirmMpinValue: args,
              });
          }
          render() {
              return (
                  &lt;&gt;
                      &lt;HeaderComponent backgroundColor=&quot;#E5E5E5&quot; showLeftIcon={true} showRightIcon={false} /&gt;
                      &lt;View style={styles.container}&gt;
                          &lt;Text style={[styles.textInfo, styles.textTitle]}&gt;We are almost there!&lt;/Text&gt;
                          &lt;View style={styles.imageWrapper}&gt;
                              &lt;Animatable.View animation=&quot;slideInDown&quot; iterationCount={1} style={styles.centerIconWrap}&gt;
                                  &lt;Image style={styles.centerIcon} source={mpin_card} /&gt;
                              &lt;/Animatable.View&gt;
                          &lt;/View&gt;
      
                          {this.state.confirmMpinEnable ? 
                          &lt;Text style={[styles.textInfo]}&gt;Setup your MPIN&lt;/Text&gt; : &lt;Text style={[styles.textInfo]}&gt;Confirm your MPIN&lt;/Text&gt;
                          }
      
                          {this.state.confirmMpinEnable ?
                              &lt;View style={styles.rowWrap}&gt;
                                  &lt;BoxInput id=&quot;catFood1&quot; onBoxInput={this.mpinText} /&gt;
                              &lt;/View&gt;:
                              &lt;View style={styles.rowWrap}&gt;
                                  &lt;BoxInput id=&quot;catFood2&quot; onBoxInput={this.confirmMpinText} /&gt;
                              &lt;/View&gt;
                          }
                          &lt;View style={styles.marginBottom}&gt;
                              &lt;Text style={[styles.mpinNote]}&gt;M-PIN is a short 6-digit PIN that you have to set for&lt;/Text&gt;
                              &lt;Text style={[styles.mpinNote]}&gt;our mandatory Two-Factor Authentication&lt;/Text&gt;
                          &lt;/View&gt;
                          &lt;View style={styles.bottomBtnSyle}&gt;
                              &lt;View style={styles.multipleBtnStyle}&gt;
                                  &lt;Button onPress={this.handleBack}&gt;{&quot;Back&quot;}&lt;/Button&gt;
                              &lt;/View&gt;
                              {this.state.confirmMpinEnable ?
                                  &lt;View style={styles.multipleBtnStyle}&gt;
                                      &lt;Button onPress={this.mpinConfirmation} &gt;{&quot;Confirm&quot;}&lt;/Button&gt;
                                  &lt;/View&gt; :
                                  &lt;View style={styles.multipleBtnStyle}&gt;
                                      &lt;Button onPress={this.handleSubmit} &gt;{&quot;Save &amp; Continue&quot;}&lt;/Button&gt;
                                  &lt;/View&gt;
                              }
                          &lt;/View&gt;
      
                      &lt;/View&gt;
                  &lt;/&gt;
              )
          }
      } 
      export default connect(mapStateToProps, mapDispatchToProps)(MPINScreen);
  </code></pre>
  <p><a href="https://i.stack.imgur.com/qw5V3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qw5V3.png" alt="enter image description here" /></a></p>
  <p>when I am click on confirm button then   hide and display . But in second component data is prepopulating which i was inserted.</p>
  <p><a href="https://i.stack.imgur.com/sXK0Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sXK0Y.png" alt="enter image description here" /></a></p>
  <p>in this screen shot data is prepopulate but i want this empty, Because user has to insert again. but it is taking same value from previous state. how we can use multiple time same component in one page.</p>