CODEWITHSUNDEEP
javascriptreactjsreact-nativebuttontouchableopacity
Atakan
Atakan

Reputation: 97

How to change multiple buttons color when pressed in React Native

I have 15 buttons and I want to change their color if its pressed. Every button have a string which are keywords and the "toggleKeyword()" function help to add it into list and if its in the list I just wanna change the color. With using state its too hard, is there any way to reach the specific button to change its color. I tried to use event.target but its return only integer ID. What should I add the code for manage this ?

 toggleKeyword(keyword){
        var list = this.state.keywordsList;
        var index = -1;
        if((index =list.indexOf(keyword)) != -1){
            list.splice(index,1);
        }else {
            list.push(keyword);
        }
        return this.setState({keywordsList:list});
    }

Thats the one of them.

<TouchableOpacity style={{backgroundColor:'white',borderRadius:15}} onPress={_ => this.toggleKeyword("depth")}>
                    <Text style={{color:"black",fontSize:20,padding:8}}>depth</Text>
</TouchableOpacity>

Upvotes: 0

Views: 1543

Answers (1)

SDushan
SDushan

Reputation: 4631

I made a sample according to the requirement.

import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

const KEYWORDS = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];

export default class App extends Component {
  state = {
    keywordsList: [],
  };

  toggleKeyword = (keyword) => {
    const { keywordsList } = this.state;
    let list = keywordsList;
    let index = -1;
    if ((index = keywordsList.indexOf(keyword)) != -1) {
      list.splice(index, 1);
    } else {
      list.push(keyword);
    }
    this.setState({ keywordsList: list });
  };

  render() {
    const { keywordsList } = this.state;
    const { container, selectedKeywordStyle, buttonStyle, textStyle } = styles;
    return (
      <View style={container}>
        {KEYWORDS.map((item) => (
          <TouchableOpacity
            style={keywordsList.find((element) => element == item) ? selectedKeywordStyle : buttonStyle}
            onPress={() => this.toggleKeyword(item)}
          >
            <Text style={textStyle}>{item}</Text>
          </TouchableOpacity>
        ))}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    justifyContent: "space-around",
    flexWrap: "wrap",
    paddingTop: 50,
  },
  textStyle: {
    fontSize: 16,
    padding: 8,
    textAlign: "center",
  },
  buttonStyle: {
    width: "30%",
    backgroundColor: "gray",
    borderRadius: 15,
    margin: 5,
  },
  selectedKeywordStyle: {
    width: "30%",
    backgroundColor: "green",
    borderRadius: 15,
    margin: 5,
  },
});

Hope this helps you. Feel free for doubts.

Upvotes: 1

Related Questions