title: React Native dynamic styles, adding styles to one element
body: <p>I'm trying to add style to an element, but the style gets on all elements. How do I get style to just the clicked element and not all of them?</p>
  
  <p>I want the element TouchableOpacity to add the style of listItemsDynmaicOpen when its clicked, witch is does but the problem is that its adding the style to all of my TouchableOpacity elements.</p>
  
  <p>So how do i do to just get style on the pressed TouchableOpacity?</p>
  
  <p>Btw im a total newbie when it comes to React and React-Native</p>
  
  <pre><code>import React, { Component } from 'react';
  import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
  import ListItemHeart from './ListItemHeart/ListItemHeart';
  class ListItems extends Component {
  state = {
      ActiveDances: [
        {"name":"Agneta &amp; Peter","month":"Jan","day":27,"weekday":"Söndag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Feb","day":23,"weekday":"Fredag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Apr","day":3,"weekday":"Måndag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
        {"name":"Agneta &amp; Peter","month":"Aug","day":1,"weekday":"Lördag","place":"Kulturens hus Bollnäs","time":"18.00-21.30","city":"Bollnäs"},
      ],
      listClicked: false
  };
  _showListItem = () =&gt; {
      if(this.state.listClicked) {
          this.setState({
              listClicked: false
          });
      }else{
          this.setState({
              listClicked: true
          });
      }
  }
  
  render() {
      const activedance = this.state.ActiveDances.map((ActiveDance, i) =&gt; {
        return (
          &lt;TouchableOpacity key={i} style={this.state.listClicked ? styles.listItemsDynamicOpen : styles.listItemsDynamicClosed} onPress={this._showListItem}&gt;
                  &lt;View style={styles.listItemsDate}&gt;
                      &lt;Text style={styles.listItemsDaytext}&gt;{ActiveDance.day}&lt;/Text&gt;
                      &lt;Text style={styles.listItemsBoldtext}&gt;{ActiveDance.month}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.listItemsInfo}&gt;
                      &lt;Text style={styles.nametext}&gt;{ActiveDance.name}&lt;/Text&gt;
                      &lt;View style={styles.listItemsInfoDayTime}&gt;
                          &lt;Text style={styles.normaltext}&gt;{ActiveDance.weekday}&lt;/Text&gt;
                          &lt;Text style={styles.normaltext}&gt;{ActiveDance.time}&lt;/Text&gt;
                      &lt;/View&gt;
                      &lt;Text style={styles.normaltext}&gt;{ActiveDance.place}&lt;/Text&gt;
                      &lt;Text style={styles.normaltext}&gt;{ActiveDance.city}&lt;/Text&gt;
                  &lt;/View&gt;
                  &lt;View style={styles.heart}&gt;
                      &lt;ListItemHeart /&gt;
                  &lt;/View&gt;
          &lt;/TouchableOpacity&gt;
          );
      });
      return (
          &lt;View style={styles.listItems}&gt;{activedance}&lt;/View&gt;
          );
  }
  
  }
  const styles = StyleSheet.create({
  listItems: {
      width: "100%",
      backgroundColor:"#f2f2f2",
      paddingTop:15
  },
  listItemsDynamicClosed: {
      width:"100%",
      height:110,
      marginBottom: 10,
      flexDirection: 'row',
      backgroundColor: "white",
  },
  listItemsDynamicOpen: {
      width: "100%",
      height: 200,
      marginBottom: 10,
      flexDirection: "row",
      backgroundColor: "white"
  },
  listItemsDate: {
      width:"15%",
      height: 50,
      alignItems:"center",
      marginTop:10
  },
  heart: {
      width:"10%",
      alignItems:"center",
      justifyContent:"center"
  },
  listItemsInfo: {
      marginLeft:10,
      width:"65%"
  },
  listItemsInfoDayTime: {
      width:"60%",
      flexDirection:'row',
      justifyContent:'space-between'
  },
  listItemsDaytext:{
      fontSize: 20,
      color:"#39B54A"
  },
  listItemsBoldtext: {
      fontSize: 19
  },
  nametext:{
      paddingTop:5,
      paddingBottom:5,
      fontSize:19,
      color:"#808080"
  },
  normaltext: {
      fontSize: 16,
      paddingTop:1,
      paddingBottom:1,
      color:"#4d4d4d"
  }
  
  });
  export default ListItems;
  </code></pre>