title: Building a Tic-Tac-Toe Game in React Native adding Styles
body: <p>I am building a tic-tac-toe game and need to know how I can add an individual style to an individual board piece. If I am using state, would I need a variable that represents each piece on the board? Is there more of an elegant way of doing this. I posted my code here, just give you an idea on how it looks.</p>
  
  <pre><code> import React, { Component } from 'react';
      import { ListView, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
  
      class MainApp extends Component {
  
        state = {
            clicked: true,
            spacePlayed: [],
            tables: [0, 1, 2, 3, 4, 5, 6, 7, 8],
            playedSpace: [],
          }
  
        searchBoard = (index) =&gt; {}
  
        _setBoard = (tableId) =&gt; {
            this.setState({
                clicked: !this.state.clicked,
              });
            var spacePlayed = this.state.playedSpace.push(tableId);
            this.setState({ spacePlayed });
  
          }
  
        buildBoard = () =&gt; {
            var clicked = false;
            return (this.state.tables.map((table, index) =&gt; {
                if (index === 0) {
                  return (
                      &lt;TouchableOpacity key={index} onPress={() =&gt; this._setBoard(index)}&gt;
                              &lt;View style={styles.table}&gt;&lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
                  );
                } else {
                  return (
                      &lt;TouchableOpacity key={index} onPress={() =&gt; this._setBoard(index)}&gt;
                              &lt;View style={styles.tableActive}&gt;&lt;/View&gt;
                          &lt;/TouchableOpacity&gt;
                  );
                }
              }));
  
          }
  
        render() {
          const active = this.state.clicked
              ? styles.active
              : null;
          return (
              &lt;View style={styles.container}&gt;
                      {this.buildBoard()}
                  &lt;/View&gt;
          );
  
        }
  
      }
      var styles = StyleSheet.create({
          container: {
  
              flexWrap: 'wrap',
              flexDirection: 'row',
              width: 200,
              justifyContent: 'center',
              alignItems: 'center',
              marginLeft: 70,
              marginTop: 20,
  
            },
          table: {
              height: 50,
              width: 50,
              backgroundColor: '#78BEC5',
              margin: 5,
              justifyContent: 'center',
              alignItems: 'center',
            },
          active: {
              backgroundColor: '#ECAF4F',
            },
          tableActive: {
              height: 50,
              width: 50,
              backgroundColor: '#ECAF4F',
              margin: 5,
              justifyContent: 'center',
              alignItems: 'center',
            },
  
        });
      export default MainApp;
  </code></pre>