React and Firebase Realtime Database Write data.

In last post we have seen how to setup react and firebase. In this we are going to go through how to write value and json to  firebase realtime Database.

Before jumping to code in react we have to set permission write:true and read:true in the firebase console. After update don't forgot to click publish button.

After change the permission select the Realtime Database.

You will see the tree structure of data in Data tabs. You can import Json file and add manually one by one data. Now we will jump to the react code. 

Write simple data to Realtime Database

Now we will open the App.js file of the react app.

First, we have to import firebase as

import * as firebase from 'firebase'

We need to do all work inside the componentDidMount() function.

  firebase.database().ref().set({
    name:"Sushil"
  }, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
  });

In the above code firebase as we imported. database().ref() gives access to the reference of the realtime database. .set is a function for adding data to the database. If you use .setfunction it will delete the below data and create new on the reference tree.

If we don't wont to lose existing data then we have to use .update function instead of .set function. Below is the same example with adding new item.

 firebase.database().ref().update({
    lastName:"Kumar"
  }, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
  });

If there is a key in the tree with same name then it will update the item value and it will not harm to the other trees.

Write simple Json data to Realtime Database

The way we write the simple data value in the same way we are going to add Json Data. Here also we have .set function and .update function and both work the same way. .set function clean everything of reference database tree and write a new one but .update function write without cleaning.

firebase.database().ref().update({
    userData: {"Name":"Sushil Kumar",
    email: "sushil@gmail.com",
    profile_picture : "imageUrl"}
}, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
});

Write Array Json data to Realtime Database

Here also we can use `.set` and `.update` same way as we mention in above examples.

firebase.database().ref().update({
  users: [{"Name":"Sushil Kumar",
  email: "sushil@gmail.com",
  profile_picture : "SushilUrl"},{"Name":"Mahesh Kumar",
  email: "mahesh@gmail.com",
  profile_picture : "maheshUrl"}]
}, function(error) {
  if (error) {
      console.log(error);
    // The write failed...
  } else {
  console.log("Data Updated");
    // Data saved successfully!
  }
});

Here is the full code of the above examples.

import './App.css';

import * as firebase from 'firebase'

import React, { Component } from 'react'

export default class App extends Component {

  constructor(){
    super();
  }

componentDidMount(){
  firebase.database().ref().set({
    name:"Sushil"
  }, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
  });

  firebase.database().ref().update({
    lastName:"Kumar"
  }, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
  });

firebase.database().ref().update({
    userData: {"Name":"Sushil Kumar",
    email: "sushil@gmail.com",
    profile_picture : "imageUrl"}
}, function(error) {
    if (error) {
        console.log(error);
      // The write failed...
    } else {
    console.log("Data Updated");
      // Data saved successfully!
    }
});

firebase.database().ref().update({
  users: [{"Name":"Sushil Kumar",
  email: "sushil@gmail.com",
  profile_picture : "SushilUrl"},{"Name":"Mahesh Kumar",
  email: "mahesh@gmail.com",
  profile_picture : "maheshUrl"}]
}, function(error) {
  if (error) {
      console.log(error);
    // The write failed...
  } else {
  console.log("Data Updated");
    // Data saved successfully!
  }
});


}

  render() {
    return (
      <div className="App">
        <h1>React and Firebase</h1>
      </div>
    )
  }
}

Hope this post will help with you projects. Message if you stuck anywhere.

Enjoy coding...