Building a Tic-Tac-Toe Game in React Native adding Styles - react-native

Question

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.
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) => {}
_setBoard = (tableId) => {
this.setState({
clicked: !this.state.clicked,
});
var spacePlayed = this.state.playedSpace.push(tableId);
this.setState({ spacePlayed });
}
buildBoard = () => {
var clicked = false;
return (this.state.tables.map((table, index) => {
if (index === 0) {
return (
<TouchableOpacity key={index} onPress={() => this._setBoard(index)}>
<View style={styles.table}></View>
</TouchableOpacity>
);
} else {
return (
<TouchableOpacity key={index} onPress={() => this._setBoard(index)}>
<View style={styles.tableActive}></View>
</TouchableOpacity>
);
}
}));
}
render() {
const active = this.state.clicked
? styles.active
: null;
return (
<View style={styles.container}>
{this.buildBoard()}
</View>
);
}
}
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;