I have an API and I need to set the switch button separately for each item. I read different answers but didn't solve my problem as I tried all of the answers.

const results = [
   {
            Id: "IySO9wUrt8",
            Name: "Los Stand",
            Category: "Mexican",
            Status: true,
        },
    {
            Id: "IySO9wUrt8",
            Name: "Los Stand 2",
            Category: "Burger",
            Status: true,
        },
     {
            Id: "IySO9wUrt8",
            Name: "Los Stand 3",
            Category: "BBq",
            Status: true,
        },
      ];

in the above code I need to set the Status in switch . If status is true then the switch will be ON

for all the code I share the link of expo for live editing

Expo Link for Editing

CodePudding user response：

You need to create a component that receives the item information, and inside the component update the state individually for each switch, otherwise the state is shared among the number of items you have. The link for Expo is here

CodePudding user response：

If you turn your results into a state you can do it link:

import React, { useEffect, useState } from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Image,
  ScrollView,
  FlatList,
  SafeAreaView,
  Switch,
  RefreshControl,
  Vibration,
  ActivityIndicator,
} from 'react-native';
import { Card, TextInput, RadioButton } from 'react-native-paper';

const results = [
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand',
    Category: 'Mexican',
    Status: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 2',
    Category: 'Burger',
    Status: true,
  },
  {
    Id: 'IySO9wUrt8',
    Name: 'Los Stand 3',
    Category: 'BBq',
    Status: true,
  },
];

export default function App() {
  const [data, setData] = useState(results);
  const updateItem = (newItem, index) => {
    // when an array is used with useState it should be treated immutable
    // if the array have  nested objects/arrays then you will need
    // a different cloning technique
    const dataClone = [...data];
    const currentItem = dataClone[index];
    dataClone[index] = { ...currentItem, ...newItem };
    setData(dataClone);
  };
  const renderItem = ({ item, index }) => {
    let items = [];

    return (
      <>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: 280,
          }}>
          <Text>{item.Name}</Text>
          <Switch
            key={item.Id}
            style={{ alignSelf: 'center' }}
            trackColor={{ false: '#767577', true: '#81b0ff' }}
            thumbColor={item.Status ? '#f5dd4b' : '#f4f3f4'}
            ios_backgroundColor="#3e3e3e"
            onValueChange={(val) => updateItem({Status: val }, index)}
            value={item.Status}
          />
        </View>
      </>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        style={styles.container}
        data={data}
        renderItem={renderItem}
        keyExtractor={(item, index) => index.toString()}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 2,
    backgroundColor: 'white',
  },

  textStyle: {
    marginHorizontal: 20,
    marginTop: 10,
    color: 'black',
    fontWeight: '600',
  },
  singleRadioButtonContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 10,
  },
});

If converting result into state is not desireable then you can move renderItem into its own file so that it can have state of its own link:

import React, { useState } from 'react';
import { View, Switch, Text } from 'react-native';

export default function Item({ item, index }) {
  const [enabled, setEnabled] = useState(item.Status)
  return (
    <>
      <View
        style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          width: 280,
        }}>
        <Text>{item.Name}</Text>
        <Switch
          key={item.Id}
          style={{ alignSelf: 'center' }}
          trackColor={{ false: '#767577', true: '#81b0ff' }}
          thumbColor={enabled ? '#f5dd4b' : '#f4f3f4'}
          ios_backgroundColor="#3e3e3e"
          onValueChange={setEnabled}
          value={enabled}
        />
      </View>
    </>
  );
}