I am rendering my buttons using Flatlist (after Fetching data from firebase) my JSON object is as follows

"DEVICES" : {
"6VnNdKZ8" : {
  "switch_1" : {
    "name" : "Air Conditioner",
    "state" : "OFF"
  },
  "switch_2" : {
    "name" : "Fan",
    "state" : "OFF"
  },
  "switch_3" : {
    "name" : "Light",
    "state" : "OFF"
  },
  "switch_4" : {
    "name" : "Power Socket",
    "state" : "OFF"
  }
}

This is how the rendered button looks like

I want to update the value of "state" to "ON/OFF" on our database by clicking that tonggle how can I update the value of the exact switch

THE BELOW CODE SHOWS HOW I AM GETTING DATA FROM FIREBASE AND USING FOR RENDERING MY SWITCHES

Note : the "items" is the uid of my devices you can ignore that part for this case its ("6VnNdKZ8") as shown in JSON File

import React,{useEffect,useState} from 'react';
import {View, StyleSheet,Text,FlatList,Dimensions } from 'react-native';
import database from '@react-native-firebase/database';
import EmptyContainer from './EmptyContainer'
import AntDesign from 'react-native-vector-icons/AntDesign';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const Switches = ({items}) => {  
  const [switches, setSwitches] = useState(null)
  
  const getDevice  = async (data) => {
    try {
      database()
        .ref('/DEVICES/' data)
        .on('value', (snapshot) => {
          if (snapshot.val()) {
            setSwitches(Object.values(snapshot.val()));   
 
          } else {
            console.log("object");
          }
        });
    } catch (error) {
      console.log("error");
    }
  };

  useEffect(() => {
    getDevice(items);
  }, [])


  if(switches != null) {
    return (     
      <FlatList 
      numColumns={2}
      data = {switches}
      keyExtractor={(item) => item.name}
      renderItem={({ item })=>(

       <View style={styles.buttonContainer}>
          <AntDesign style={{marginTop:-20, paddingVertical: 10}} name="bulb1" size={25} color="#666" />
          <Text style={styles.item}>{item.name}</Text>
       </View>
       
      )}
      />   
  );
  }
  return(
    <EmptyContainer/>
  )
    
}

  export default Switches;
  const styles = StyleSheet.create({
    buttonContainer:{
      marginTop:30,
      padding:10,
      height:150,
      borderRadius:22,
      backgroundColor: '#FFFFFF',
      width: windowWidth/2.3,
      marginHorizontal:10,
      justifyContent: 'center',
      color:'#383D41',
      elevation: 4,
      margin:5,

    },
    item:{
      fontFamily:"SegoeUI",
      color: '#383D41',
      fontSize:18,
      fontWeight: 'bold',
    }
  })

CodePudding user response：

useEffect(() => {
    // update firebase func
  }, [switches])

when update switches state also update firebase data

https://reactjs.org/docs/hooks-effect.html

CodePudding user response：

Update the value in the updateValueinFirebase function whereby using the item property can find the current value. Update the value from "OFF" to "ON" then refetch the data;

import React,{useEffect,useState} from 'react';
import {View, StyleSheet,Text,FlatList,Dimensions } from 'react-native';
import database from '@react-native-firebase/database';
import EmptyContainer from './EmptyContainer'
import AntDesign from 'react-native-vector-icons/AntDesign';
const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

const Switches = ({items}) => {  
  const [switches, setSwitches] = useState(null)
  
  const getDevice  = async (data) => {
    try {
      database()
        .ref('/DEVICES/' data)
        .on('value', (snapshot) => {
          if (snapshot.val()) {
            setSwitches(Object.values(snapshot.val()));   
 
          } else {
            console.log("object");
          }
        });
    } catch (error) {
      console.log("error");
    }
  };

  useEffect(() => {
    getDevice(items);
  }, [])


  const updateValueinFirebase = (item)=>{
      // update the value here in item property can find the current value update the value from "OFF" to "ON" then refetch the data;
  }


  if(switches != null) {
    return (     
      <FlatList 
      numColumns={2}
      data = {switches}
      keyExtractor={(item) => item.name}
      renderItem={({ item })=>(

       <View style={styles.buttonContainer} onPress={()=>{updateValueinFirebase(item)}}>
          <AntDesign style={{marginTop:-20, paddingVertical: 10}} name="bulb1" size={25} color="#666" />
          <Text style={styles.item}>{item.name}</Text>
       </View>
       
      )}
      />   
  );
  }
  return(
    <EmptyContainer/>
  )
    
}

  export default Switches;
  const styles = StyleSheet.create({
    buttonContainer:{
      marginTop:30,
      padding:10,
      height:150,
      borderRadius:22,
      backgroundColor: '#FFFFFF',
      width: windowWidth/2.3,
      marginHorizontal:10,
      justifyContent: 'center',
      color:'#383D41',
      elevation: 4,
      margin:5,

    },
    item:{
      fontFamily:"SegoeUI",
      color: '#383D41',
      fontSize:18,
      fontWeight: 'bold',
    }
  })