I'm using react native's powerful flatlist this is my array which is like this:

```
data =   [
      {Color:[{'label':'BLUE','value':'10'}, {'label':'RED','value':'11'}]},
      {Size:[{'label':'SMALL','value':'13'},{'label':'BIG','value':'12'}]}
      ]

```

and here it Is my flatlist 

```
<FlatList data={data}
              numColumns={1}
              keyExtractor={(item, index) => index.toString()}
              extraData={this.state}
              ItemSeparatorComponent={FlatListItemSeparator}
              renderItem={({item, index}) => {
                return(
                <View >
                <Text >{Object.keys(item)}</Text>
                <FlatList data={item[Object.keys(item)]}
                numColumns={5}
                keyExtractor={(index) => "D"+index.toString()}
                extraData={this.state}
                renderItem={({item, index}) => {
                  return(
                        <TouchableOpacity onPress={() => this._handleclick(index, item)} style={[
                            styles.Buttoncolor, this.state.selected == index+item.label
                              ? styles.onfocusbutton
                              : null
                          ]}>
                          <Text style={[styles.textcolor,this.state.selected == index+item.label?styles.white:null]}>{item.label}</Text>
                        </TouchableOpacity>
                        )
                }
                }/>
              </View>)}}/>

```

this is the function where im matching the index of item..

```
  _handleclick = (index, item) => {
        this.setState({selected: index+item.label, selectedColor: item.value})
      }

```

here it is what I tried :->

I call hand click function match its value with index+label name and it get change itself but
when I click on BLUE it change its color but when I click on SMALL
it can change itself but blue gets its previous condition

now here's main what I want to do :->

I want to select only one item based on there array which is 'Color'
I want that when I click on BLUE it can be change it color .
and if I click also on SMALL it can also change color itself that two value need to be stored.

I hope you could easily understand.
thanks in advance

UPDATE 1

STATUS :**SOLVED**

**Changes**

```
_handleclick = (index, item,objectname) => {
         const {selected,result} = this.state
         let selectedIndex = this.state.selected.indexOf(item.value);
            if(selectedIndex == -1){
           let my =   this.state.result.filter((e)=>{return e[objectname]})
             selected.forEach((items) => {
                    let arrayofattribute =   result.filter((e)=>{return e[objectname]})
                    arrayofattribute.forEach((value,index)=>{
                    newval =  value[objectname].map((val,i)=>{
                        if(items == val.label)
                        {
                          selected.splice(selected.indexOf(val.label),1)
                        }
                      })
                    })
             })
            this.setState({selected:[item.label,...this.state.selected]})
          }
      }

```

in Flatlist render

```
<TouchableOpacity
                        onPress={() => this._handleCategoryColor(index, item,objectname)}

                        style={[
                          styles.Buttoncolor,

                          this.state.selected.indexOf(item.label) != -1
                            ? styles.onfocusbutton
                            : null,
                        ]}>
                        <Text
                          style={[
                            styles.textcolor,
                            this.state.selected.indexOf(item.label) != -1
                              ? styles.white
                              : null,
                          ]}>
                          {item.label}

                        </Text>
                      </TouchableOpacity>

```