React 原生单选组件

Question

I am trying to achieve a simple single selectable item, as shown in the image below.

Right now, I have created an array of my data items and using .map to render the components because there are only 3-4 items max, now I want to select only a single item and change the color on the basis, and if I select any other item, it should unselect all the other items but not the current single selected item/component. I tried to do this but I am able to select all of them, obviously. Below is the code:

const items = [
  {
    id: 1,
    iconName: 'male',
    title: 'Male',
    name: 'male',
  },
  {
    id: 2,
    iconName: 'female',
    title: 'Female',
    name: 'female',
  },
  {
    id: 3,
    iconName: 'transgender',
    title: 'Others',
    name: 'others',
  },
];

const Component = ({dispatch, iconName, title, name}) => {
  const [isSelected, setIsSelected] = useState(false);
  return (
    <TouchableOpacity
      activeOpacity={0.6}
      style={
        isSelected
          ? [styles.selectable, {backgroundColor: 'green'}]
          : [styles.selectable, {backgroundColor: COLORS.PINK}]
      }
      onPress={() => {
        setIsSelected(!isSelected);
      }}>
      <View style={styles.row}>
        <Ionicon name={iconName} size={36} color="#fff" />
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  );
};

const Gender = () => {

  return (
    <View>
      <View>
        <Text>Your Gender</Text>
        <View>
          {items.map(item => (
            <Component
              key={item.id}
              title={item.title}
              iconName={item.iconName}
            />
          ))}
        </View>
      </View>
    </View>
  );
};

All though I could solve this by using separate states for each button, so whenever one is selected/pressed, the other states should become false. But then I would have to render individual component without using the .map method which I find inefficient. Can someone provide any solution based on my current approach to this problem?

Thank you!

Answer 1

Consider moving isSelected to the parent component, and instead of storing a booolean, store the selected item id. Pass the itemId, selectedId, setSelectedId (as a callback) to the child components and change the style check to:

style={
        itemId === selectedId
          ? [styles.selectable, {backgroundColor: 'green'}]
          : [styles.selectable, {backgroundColor: COLORS.PINK}]
      }
      onPress={() => {
        setSelectedId(itemId);
      }}>

Now you can get rid of keeping track whether the item is selected in the component, and only worry about it in the context of the parent (as it should be).

const Gender = () => {
  const [selectedId, setSelectedId] = useState(false);

  return (
    <View>
      <View>
        <Text>Your Gender</Text>
        <View>
          {items.map(item => (
            <Component
              key={item.id}
              itemId={item.id}
              selectedId={selectedId}
              setSelectedId={setSelectedId}
              title={item.title}
              iconName={item.iconName}
            />
          ))}
        </View>
      </View>
    </View>
  );
};