Skip to content

Instantly share code, notes, and snippets.

@kulakowka
Last active October 2, 2017 10:50
Show Gist options
  • Star 17 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save kulakowka/24bb83775358ad4c3bc7 to your computer and use it in GitHub Desktop.
Save kulakowka/24bb83775358ad4c3bc7 to your computer and use it in GitHub Desktop.
How to mixin reactfire to es6 react class. More info: https://github.com/firebase/reactfire/issues/38#issuecomment-192963227
import React, { Component } from 'react'
import Firebase from 'firebase'
import ReactFireMixin from 'reactfire'
import reactMixin from 'react-mixin'
const ref = new Firebase('https://<APPNAME>.firebaseio.com/users')
class UsersList extends Component {
constructor (props, context) {
super(props, context)
this.state = {
users: []
}
}
componentDidMount () {
this.bindAsArray(ref, 'users')
}
renderUser (user) {
return <p>{user.name}</p>
}
render () {
return (
<div>
{this.state.languages.map(this.renderLanguage)}
</div>
)
}
}
reactMixin(UsersList.prototype, ReactFireMixin)
export default UsersList
@jf423
Copy link

jf423 commented Jul 5, 2016

it shows Uncaught TypeError: _firebase2.default is not a constructor(anonymous function)

@morgler
Copy link

morgler commented Aug 8, 2016

@jf423 Your error comes from using Firebase 3 instead of 2. The constructor syntax new Firebase() no longer works in version 3. You probably have to do something along the lines of:

firebase.initializeApp(myConfig);

…and then replace all occurences of ref with firebase. I didn't test this and I am not sure, whether this would solve your problem. What I definitely know is, that your problem stems from using Firebase 3 with the Firebase 2 syntax.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment