Radio button function called multiple times in React Native

user_11671225 0
Viewed 50

I made a component to work like a mix of radio button and checkbox (if you tap on a selected one it become unselected) it has a function that changes the state. the problem is this function runs multiple times not once for each button and I don't want that I just want when user tap on a button function call once for that button id.

<ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
  {
    availableCategories.categories.map((item, index) => {
      return (
        <TouchableOpacity
          onPress={() => categorySelectedHandler(item)}
          key={item.id}
          selected={item.selected}>
          <View
            style={[styles.catbutton,
            props.catbuttonStyle,
            item.selected == true ? styles.selectedButton : null,
            ]}>
            <View style={styles.caticonContainer}>
              <SvgCssUri
                width={wp(10)}
                height={wp(10)}
                uri={item.icon}
                fill="black"
              />
            </View>
            <Text style={[styles.catbuttonText,
            item.selected == true ? styles.selectedButtonText : null
            ]}>{item.title}</Text>
          </View>
        </TouchableOpacity>
      )
    })
  }
</ScrollView>

and this is my function: suppose that I tap on one category and there are 6 of them, this function runs 6 times. but I want once.

  const categorySelectedHandler = (item) => {
    let updatedState = availableCategories.categories.map((el) => {
      if (el.id == item.id && el.selected == false) {
        
        return { ...el, selected: true }
      } else {
        
        return { ...el, selected: false }
      }
    });
    setAvailableCategories({ loading: false, categories: updatedState });
  }
react-native reactjs javascript
1 Answers

This maybe help your :

       constructor(props) {
            super(props)
            this.state = {
                selected_index : null
            }
        }

        selected = (index) => {
            if (index == this.state.selected_index) {
                return true
            } else {
                return false
            }
        }

        
        <ScrollView showsHorizontalScrollIndicator={false} horizontal={true}>
            {
                availableCategories.categories.map((item, index) => {
                    return (
                        <TouchableOpacity
                            onPress={() => this.setState({ selected_index : index})} // Add here your other function that want to run
                            key={item.id}
                            selected={this.selected()}>
                            <View
                                style={[styles.catbutton,
                                props.catbuttonStyle,
                                item.selected == true ? styles.selectedButton : null,
                                ]}>
                                <View style={styles.caticonContainer}>
                                    <SvgCssUri
                                        width={wp(10)}
                                        height={wp(10)}
                                        uri={item.icon}
                                        fill="black"
                                    />
                                </View>
                                <Text style={[styles.catbuttonText,
                                item.selected == true ? styles.selectedButtonText : null
                                ]}>{item.title}</Text>
                            </View>
                        </TouchableOpacity>
                    )
                })
            }
        </ScrollView>
user_144835130
Related