React native, select multiple items from a list

Question

I created a list by using data.map() method, but I'm facing a problem that it's only selecting one item but I want it to select multiple items from list. I'm not getting it how to do it.I created that kind list before so user can only select one item from list but I'm struggling to make it select mutliple items. Can someone help? below is my code

const [state, setState] = useState({
    isLoading: false,
    isClicked: false,
    selectedIndex: -1,
  });
  const {isClicked, isLoading, selectedIndex} = state;

  const Amenties = ({item, id, callBack}) => {
    const clicked = selectedIndex === id;
    return (
      <View style={styles.amenities}>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Image source={item.image} />
          <Text
            style={{
              ...commonStyles.fontSize15,
              color: colors.themeColor,
              marginLeft: moderateScale(16),
            }}>
            {item.amenities}
          </Text>
        </View>
        {clicked ? (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}>
            <Image
              source={imagePath.checkboxActive}
              style={{
                width: moderateScale(18),
                height: moderateScaleVertical(18),
                borderRadius: moderateScale(18 / 2),
              }}
            />
          </TouchableOpacity>
        ) : (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}
            style={{
              width: moderateScale(18),
              height: moderateScaleVertical(18),
              backgroundColor: colors.blackOpacity15,
              borderRadius: moderateScale(18 / 2),
            }}
          />
        )}
      </View>
    );
  };

data is

const Top_Amenities = [
    {
      id: 1,
      amenities: 'Wifi',
      image: imagePath.wifiIcon,
    },
    {
      id: 2,
      amenities: 'Air Conditioner',
      image: imagePath.airConditionerIcon,
    },
    {
      id: 3,
      amenities: 'Printer',
      image: imagePath.printerIcon,
    },
]

mapped data

  {Other_Amenities.map((data, id) => (
            <Amenties
              item={data}
              id={data.id.toString()}
              callBack={(id) => setState({selectedIndex: id})}
            />
          ))}

can someone please help

Answer 1

you will need store id's of list in a array, you will need maintain a index state for each selected list item, set the index state to default 0. Full updated Code

import React, {Component, useState} from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  FlatList,
  TouchableOpacity,
  ScrollView
} from 'react-native';

function AddAmenties({navigation}) {
  const [state, setState] = useState({
    isLoading: false,
    isClicked: false,
    selectedIndex: [],
    index: 0,
  });
  const {isClicked, isLoading, selectedIndex, index} = state;
  
  const Amenties = ({item, id, callBack}) => {
    var color = "grey"
    if(selectedIndex[1] && selectedIndex.includes(id)){
      color ="blue"
    } else if(selectedIndex[0] === id){
      color = "blue"
    }
    return (
      <View style={styles.amenities}>
        <View style={{flexDirection: 'row', alignItems: 'center'}}>
          <Text
            style={{
           
             
              marginLeft: 16,
            }}>
            {item.amenities}
          </Text>
        </View>
        { (
          <TouchableOpacity
            onPress={() => {
              callBack(id);
            }}
            style={{
              width: 18,
              height: 18,
              backgroundColor:color,
              borderRadius: 18/2,
            }}
          />
        )}
      </View>
    );
  };

  const Top_Amenities = [
    {
      id: 1,
      amenities: 'Wifi',
      
    },
    {
      id: 2,
      amenities: 'Air Conditioner',
   
    },
    {
      id: 3,
      amenities: 'Printer',
   
    },
    {
      id: 4,
      amenities: 'Food',
     
    },
    {
      id: 5,
      amenities: 'Coffee',
    
    },
  ];

 
  const selectedItem = (id) => {
    
    if (selectedIndex == 0) {
      setState({selectedIndex:[ id], index: 1});
     
    } else {
      //alert(selectedIndex)
      if(selectedIndex.includes(id) === false){
        setState({selectedIndex: [...selectedIndex, id], index: index + 1});
      
      }
    }
  };

  return (
    <View>
      <ScrollView
        style={{
          marginTop: 33,
          marginHorizontal: 16,
        }}>
        <Text>
         Top Amenities
        </Text>
        <View style={styles.container}>
          {Top_Amenities.map((data, id) => (
            <Amenties
              item={data}
              id={data.id.toString()}
              callBack={(id) => {
                selectedItem(id);
                console.log(selectedIndex);
              }}
            />
          ))}
        </View>
      
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    borderWidth: 1,
    borderColor: "grey",
    marginVertical: 12,
    paddingHorizontal: 16,
    paddingVertical: 23,
    borderRadius: 5,
  },
  amenities: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginVertical: 12,
  },
});
export default AddAmenties;