title: How would I dynamically append duplicate components in react, react-native
body: <p>I am confused about how to properly dynamically add/create same components on button press for react native. I have used .map(()=>{}) on existing info to create components and then display the results. </p>
  
  <p>Would I have to save each new component into a setstate array, then map that?
  I looked a little into refs, but wasn't sure how that was better than just a setstate. The problem I see is if I want to update the value for each component, how would I go about that if their all originally duplicates?</p>
  
  <p>Something along the lines of this: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class SingleExercise extends Component {
    constructor(props) {
      super(props);
      this.state = {
        objInfo: this.props.navigation.getParam("obj"),
        currentSetSelected: 0
      };
      this.addSet = this.addSet.bind(this);
    }
  
    addSet = () =&gt; {
      return (
        &lt;addSet /&gt;
      )
    }
  
  
    render() {
      const { navigation } = this.props;
      return (
        &lt;View style={{ flex: 1 }}&gt;
          &lt;View style={{ height: 80 }}&gt;
            &lt;addSet /&gt;
            &lt;View&gt;
              &lt;Button         //here
                large={false}
                onPress={() =&gt; {
                  this.addSet();
                }}
                title={"add more"}
              /&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/View&gt;
      );
    }
  }
  
  const addSet = () =&gt; {
    return (
      &lt;TouchableHighlight&gt;
      &lt;View&gt;
      &lt;TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          defaultValue={'test'}
          onChangeText={(text) =&gt; this.setState({text})}
        /&gt;
      &lt;/View&gt;
      &lt;/TouchableHighlight&gt;
    );
  }</code></pre>
  </div>
  </div>
  </p>