How to sync data from Firebase to React using ES6?

504 Views Asked by At

I am following tutorial from Tyler McGinnis on using firebase on react, but I cannot get my app to sync to my firebase. The tutorial was originally done not on ES6. This is the meat of the code:

var Profile = React.createClass({
  mixins: [ReactFireMixin],
  getInitialState: function(){notes: ['some','notes']},

  componentDidMount: function(){
    this.ref = new Firebase('https://github-note-taker.firebaseio.com/');
    var childRef = this.ref.child(this.props.params.username);
    this.bindAsArray(childRef, 'notes');
  }
  ...
  //render
  <Notes username={this.props.params.username} notes={this.state.notes} />

This will sync notes to FB database and renders note array

I have a firebase database populated with some amount of data. When I access the page, my Note component is only displaying the initial state, not the firebase data. I am new at Firebase. After researching, I came up with ES6 version of it:

var base = Rebase.createClass({
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  storageBucket: ...,
  messagingSenderId: ...
});

class Profile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: [1,2,3],
     }
  }
  init(){
    this.ref = base.syncState(`/profile/${this.props.routeParams.username}`, {
      context: this,
      asArray: true,
      state: 'notes'
    });

    helpers.getGithubInfo(this.props.routeParams.username)
      .then((dataObj) => {
        this.setState({
          bio: dataObj.bio,
          repos: dataObj.repos
        });
      });

  }
  componentDidMount(){
    this.init();
  }
  componentWillUnmount(){
    base.removeBinding(this.ref);
  }
  componentWillReceiveProps(){
    base.removeBinding(this.ref);
    this.init();
  }
  //render
  <Notes notes={this.state.notes} />

I am sure I miss something, but I am not sure what it is. How can I use ES6 to sync Firebase to my React App?

0

There are 0 best solutions below