class ButtonOption extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data : [],
      active : 0
    };
  }

   loadButton(temp){
     let result = [];
     for (let i =0;i<temp.length;i++){
       if(i==this.state.active){
         result.push(
         <View key={i} style={buttonOption.main}>
           <TouchableOpacity style={buttonOption.tabActive} onPress={()=>{this.setState({active:i});alert(this.state.active)}}>
             <Text style={buttonOption.labelActive}>{temp[i]}</Text>
           </TouchableOpacity>
         </View>)
       }else{
         result.push(
         <View key={i} style={buttonOption.main}>
           <TouchableOpacity style={buttonOption.tab} onPress={()=>{this.setState({active:i});alert(this.state.active)}}>
             <Text style={buttonOption.label}>{temp[i]}</Text>
           </TouchableOpacity>
         </View>)
       }
     }
     return result;
   }

   componentDidMount(){
     this.setState({data:this.loadButton(this.props.arrButton)})
   }

   render() {
    return (
      <View style={{flexDirection:'row',padding:10}}>
        {this.state.data}
      </View>
    );
  }
}
export default ButtonOption;