title: React Native onPress gets called on every component rendered by mapping json
body: <p>I tried Googling this but due to the English language not being my greatest skill I find it hard to Google the right thing. I've tried to fix this problem myself which works, but I wonder if there are better ways to do this.</p>
  
  <p><strong>Situation:</strong> </p>
  
  <p>I have a json object and want to render the values in it, so I mapped the values and render it in a component. I only have to call that component once and it will render itself multiple times acoording to how many objects are in my json object.</p>
  
  <p>Now when I fire the onPress function on a single, specific rendered instance, it will fire for every rendered instance.</p>
  
  <p><strong>Desired situation:</strong></p>
  
  <p>When I have multiple rendered instances of my component, and I fire onPress on a single one, it should only fire for that instance.</p>
  
  <p><strong>Code:</strong></p>
  
  <p>I'm performing a get request and response returns a json object:</p>
  
  <pre><code>{
  "objects": [
      {
          "name": "Alarm chauffeurs@ON=100",
          "object_id": 1,
          "input_value": 0,
          "last_changed": "2019-03-08T14:30:54",
      }, ...
  </code></pre>
  
  <p>Next I map the values to my component: </p>
  
  <pre><code>      let cards = this.state.dataSource.objects.map((val, key) =&gt; {
        return (
           &lt;Animated.View key={key} style={[cardStyle.container, { height: this.state.collapse[parseInt(val.object_id)] }]}&gt;
              &lt;TouchableHighlight onPress={() =&gt; this.toggle(val.object_id)} /&gt;
           &lt;/Animated.View&gt;
        );
        });
  </code></pre>
  
  <p>Now I have to call <code>{cards}</code> in my MainView only once and React Native will render multiple cards:</p>
  
  <pre><code>      return (
           &lt;View style={style.container}&gt;
              &lt;View style={style.colDash}&gt;
                 &lt;ScrollView&gt;
                    {cards}
                 &lt;/ScrollView&gt;
              &lt;/View&gt;
          &lt;/View&gt;
        );
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cjgBK.jpg" rel="nofollow noreferrer">Here's an image of the output</a></p>
  
  <p>Now once I press a button, onPress gets fired on every component on screen.</p>
  
  <p><strong>I've tried:</strong></p>
  
  <p>Created an array and pushed a random value to it as <code>id</code> always starts at 1. The rest is done with a simple for loop. This probably isn't the best way to handle my problem.</p>
  
  <pre><code>  toggle(id) {
       var test = []
       test.push(123);
       for (var i = 1; i &lt; 8; i++) {
           if (id == i) {
               var temp = new Animated.Value(75);
               Animated.timing(
                  temp, {
                     toValue: 150,
                     duration: 500,
                  }
               ).start()
               test.push(temp);
           }
           else {
               var temp = new Animated.Value(75);
               Animated.timing(
                  temp, {
                      toValue: 75,
                      duration: 1,
                  }
               ).start()
               test.push(temp);
          }
       }
       this.setState({
           collapse: test
        });
  </code></pre>
  
  <p>Later on, I also want to add the possibility to be able to toggle multiple instances at the same time. As of now when I fire one onPress, the rest gets reset.</p>