title: How to change design(e.g color) of button on press which is rendered through loop?
body: <p>Hey guys can anybody help me way out of this problem. My problem is related to improving UX of the app. I have rendered accordion through a loop which renders data with a button on it. I wanted to change color of the button which is pressed thus helping in UX. But ran into problem as all buttons are turning their colors . The problem is i am rendering color from state can anybody help me out with some different solution.</p>
  
  <p>This is the loop through which i am rendering accordion:</p>
  
  <pre><code>{this.state.services.map((tab, i) =&gt; {
              return(
                &lt;ScrollView key={i} tabLabel={tab.category} style={{flex: 1}}&gt;
                  {tab.names.map((name, j) =&gt; this.renderRow(name))}
                &lt;/ScrollView&gt;
              )
            })}
  </code></pre>
  
  <p>This is the render function:</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>  renderRow (rowData) {
      var header = (
        rowData.subGroup.length &gt; 1 ? &lt;View&gt;
          &lt;Text&gt;{rowData.name}&lt;/Text&gt;
        &lt;/View&gt;
        :
        &lt;View&gt;
          &lt;View style={{flex: 1}}&gt;
            &lt;Text&gt;{rowData.name}&lt;/Text&gt;
            &lt;Text&gt;{rowData.subGroup[0].duration}Min&lt;/Text&gt;
          &lt;/View&gt;
          &lt;Text&gt;₹{rowData.subGroup[0].price.M ? rowData.subGroup[0].price.M : rowData.subGroup[0].price.F}&lt;/Text&gt;
          &lt;TouchableOpacity onPress={() =&gt; this._add(rowData.subGroup[0])}&gt;
            &lt;View style={styles.buttonView}&gt;
              &lt;Text style={styles.buttonText}&gt;ADD&lt;/Text&gt;
            &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
        &lt;/View&gt;
  
      );
  
      var content = (
        &lt;View style={{flex: 1}}&gt;
          {rowData.subGroup.map((sg, i) =&gt; {
  
              return(
                sg.subGroup ? &lt;View&gt;
                    &lt;View style={{flex: 1}}&gt;
                      &lt;Text&gt;{sg.subGroup ? sg.subGroup : sg.name}&lt;/Text&gt;
                      &lt;Text&gt;{sg.duration}Min&lt;/Text&gt;
                    &lt;/View&gt;
                    &lt;Text style={styles.price}&gt;₹{sg.price.M ? sg.price.M : sg.price.F}&lt;/Text&gt;
                    &lt;TouchableOpacity onPress={() =&gt; this._add(sg)}&gt;
                      &lt;View style={styles.buttonView}&gt;
                        &lt;Text style={styles.buttonText}&gt;ADD&lt;/Text&gt;
                      &lt;/View&gt;
                    &lt;/TouchableOpacity&gt;
                &lt;/View&gt;
                :
                &lt;View&gt;&lt;/View&gt;
              )
  
          })}
        &lt;/View&gt;
      );
  
      return (
        &lt;Accordion
          key={rowData.name}
          header={header}
          content={content}
          easing="easeOutCubic"
        /&gt;
      );
    }</code></pre>
  </div>
  </div>
  </p>
  
  <p>can anybody guide me through different approach?</p>