Manpreet Oberoi Manpreet Oberoi - 1 year ago 92
React JSX Question

firebase :: Cannot read property 'props' of null

Hello i am trying to use react-router with firebase. but it gives me this error.

Cannot read property 'props' of null

this is exactly code, where i am using my react-router

Down code is on component as loginpanel component.

else if ( === currentObject.username && this.password.value === currentObject.password && user_id)
var data25 = '';
var groupid = '';

var query = firebase.database().ref("/Users_group").orderByChild('id').equalTo(user_id);
query.on("child_added", function hello (snapshot) {

data25 = snapshot.val();

groupid = data25.User_Group_id;

AppActions.createComment(currentObject.username, currentObject.password, user_id, groupid);

//error is here,




my react router is declared on main.jsx
my react-router looks like this.

<Router history={hashHistory}>
<Route path="/" component={Loginpanel}/>
<Route path="Index" component={Index}/>
<Route path="Form" component={Form} />
<Route path="Checkindex" component={Index}/>
<Route path="Signup" component={Signup}/>
<Route path="Admin" component={Admin}/>
<Route path="AdminEditDetails" component={AdminEditDetails}/>
<Route path="AdminDetails" component={AdminDetails}/>


Answer Source

In your callback, the this pointer no longer points to your React component. There are many ways to deal with this:

Capture this into another variable

var component = this;
query.on("child_added", function hello (snapshot) {

Explicitly bind this

query.on("child_added", function hello (snapshot) {

Use fat arrows, which implicitly keeps this

query.on("child_added", snapshot => {

Note that this is a very common problem that developers have in JavaScript and I highly recommend you learn more about the way this behaves with callbacks:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download