How to add, update and list data into firebase using js

Question

I am doing my first application using react native and firebase so I know how to configure like this

var config = {
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  storageBucket: "<BUCKET>.appspot.com",
};
firebase.initializeApp(config);

But I don't know how to list add or update data somebody can help me I've tried this

firebase.database().ref('users/' + userId).set({
    username: name,
    email: email,
    profile_picture : imageUrl
});

What's the error?

Eric Guan
– Eric Guan

2017-06-27 15:59:02 +00:00
Commented Jun 27, 2017 at 15:59 — Eric Guan
– Eric Guan, Commented Jun 27, 2017 at 15:59

Sanjit Singh · Accepted Answer · 2017-06-27 16:04:54Z

1

There is a good step by step ReactFire tutorial on Firebase official website. Check here https://www.firebase.com/docs/web/libraries/react/guide.html

Step 1: Add firebase to you project with in head tag.

<!-- Inside head -->
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>

Step 2: Create reference to users node (or whatever node you have in your database) You can do it with in componentWillMount() method. (assume your firebase node is user)

componentWillMount() {
    this.firebaseRef = new Firebase("https://YourApp.firebaseio.com/users");
}

Step 3: To add data into firebase (Assume form calls handleSubmit function when it gets submitted)

handleSubmit: function(e) {
   e.preventDefault();
   this.firebaseRef.push({
      username: 'username',
      email: '[email protected]',
      imageUrl: 'some image url'
   });
   this.setState({text: ""});
}

Step 4: Clean up database handler when your component unmounts.

componentWillUnmount: function() {
   this.firebaseRef.off();
}

answered Jun 27, 2017 at 16:04

Sanjit Singh

2762 gold badges3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luiz Fernando Sousa Camargo Over a year ago

Thanks men!! Worked!!

Collectives™ on Stack Overflow

How to add, update and list data into firebase using js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related