Comment changer le design (par exemple la couleur) du bouton sur la presse qui est rendu à travers la boucle?

Question

Hé les gars, quelqu'un peut m'aider à sortir de ce problème. Mon problème est lié à l'amélioration UX de l'application. J'ai rendu l'accordéon à travers une boucle qui restitue les données avec un bouton dessus. Je voulais changer la couleur du bouton qui est pressé aidant ainsi en UX. Mais a rencontré un problème car tous les boutons tournent leurs couleurs. Le problème est que je suis en train de rendre la couleur de l'état quelqu'un peut-il m'aider avec une solution différente.

C'est la boucle à travers laquelle je suis rendu accordéon:

{this.state.services.map((tab, i) => { 
      return(
       <ScrollView key={i} tabLabel={tab.category} style={{flex: 1}}> 
       {tab.names.map((name, j) => this.renderRow(name))} 
       </ScrollView> 
      ) 
      })} 

Ceci est le rendu fonction:

renderRow (rowData) { 
 
    var header = (
 
     rowData.subGroup.length > 1 ? <View> 
 
     <Text>{rowData.name}</Text> 
 
     </View> 
 
     : 
 
     <View> 
 
     <View style={{flex: 1}}> 
 
      <Text>{rowData.name}</Text> 
 
      <Text>{rowData.subGroup[0].duration}Min</Text> 
 
     </View> 
 
     <Text>₹{rowData.subGroup[0].price.M ? rowData.subGroup[0].price.M : rowData.subGroup[0].price.F}</Text> 
 
     <TouchableOpacity onPress={() => this._add(rowData.subGroup[0])}> 
 
      <View style={styles.buttonView}> 
 
      <Text style={styles.buttonText}>ADD</Text> 
 
      </View> 
 
     </TouchableOpacity> 
 
     </View> 
 

 
    ); 
 

 
    var content = (
 
     <View style={{flex: 1}}> 
 
     {rowData.subGroup.map((sg, i) => { 
 

 
      return(
 
       sg.subGroup ? <View> 
 
        <View style={{flex: 1}}> 
 
        <Text>{sg.subGroup ? sg.subGroup : sg.name}</Text> 
 
        <Text>{sg.duration}Min</Text> 
 
        </View> 
 
        <Text style={styles.price}>₹{sg.price.M ? sg.price.M : sg.price.F}</Text> 
 
        <TouchableOpacity onPress={() => this._add(sg)}> 
 
        <View style={styles.buttonView}> 
 
         <Text style={styles.buttonText}>ADD</Text> 
 
        </View> 
 
        </TouchableOpacity> 
 
       </View> 
 
       : 
 
       <View></View> 
 
      ) 
 

 
     })} 
 
     </View> 
 
    ); 
 

 
    return (
 
     <Accordion 
 
     key={rowData.name} 
 
     header={header} 
 
     content={content} 
 
     easing="easeOutCubic" 
 
     /> 
 
    ); 
 
    }

quelqu'un peut-il me guider à travers une approche différente?

Answer 1

Les gars j'ai découvert la solution juste écrit une fonction simple et retourné vrai ou faux. Sur la base de la valeur retournée et l'opérateur ternaire je change le style de la valeur

est ici une solution choisie:

<View style={this._toggleServiceButtonView(sg) ? styles.removeView : styles.buttonView}> 
    <Text style={this._toggleServiceButtonView(sg) ? styles.removeText : styles.buttonText}> 
     {this._toggleServiceButtonView(sg) ? 'REMOVE' : 'ADD'} 
    </Text> 
    </View> 

Voici la fonction dans laquelle je suis en train de vérifier si la valeur sélectionnée est dans le tableau de panier pour revenir vrai.

_toggleServiceButtonView(data) { 
    return this.state.cartArr.length != 0 && this.state.cartArr.findIndex((service) => { 
     if(service.service._id === data._id){ 
     return true; 
     } else { 
     return false; 
     } 
    }) !== -1 
    }