Reputation: 1755
I am getting a TypeError: Cannot read property 'bind' of undefined
from my pushtofirebase
function, even though, everything looks right to me. Would appreciate any kind of help.
Here is the code:
export default class RegisterView extends React.Component {
constructor(props) {
super(props);
this.pushToFirebase = this.pushToFirebase.bind(this);
}
onSubmit = values => {
var user = {
firstName: values.fname,
lastName: values.lname,
email: values.email,
password: values.password
}
firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
.then(function () {
this.pushToFirebase(true);
})
.catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/email-already-in-use') {
console.log(errorMessage);
}
this.pushToFirebase(false);
});
this.pushToFirebase = status => {
if (status) {
const ref = firebase.database().ref('users/').push(user);
console.log('im inside pushToFirebase');
console.log(ref.key);
this.props.setuserkey;
}
}
}
}
I should also mention, that I am new to react, been through 3 weeks of solid react development and am still quite new.
Thank you all again for taking your time.
Upvotes: 0
Views: 647
Reputation: 1707
Try this
this.pushToFirebase (status) {
Hope this could be helpful for you
Upvotes: 0
Reputation: 45121
You are declaring pushToFirebase
inside onSubmit
. Should be
export default class RegisterView extends React.Component {
// make it class property
pushToFirebase = status => {
if (status) {
const ref = firebase.database().ref('users/').push(user);
console.log('im inside pushToFirebase');
console.log(ref.key);
this.props.setuserkey;
}
}
onSubmit = values => {
var user = {
firstName: values.fname,
lastName: values.lname,
email: values.email,
password: values.password
}
firebase.auth().createUserWithEmailAndPassword(values.email, values.password)
.then( () => { // Use arrow function
this.pushToFirebase(true);
})
.catch( (error) => { // Use arrow function
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/email-already-in-use') {
console.log(errorMessage);
}
this.pushToFirebase(false);
});
}
}
Also you don't need to bind arrow function property in constructor.
UPD Also you need to replace function()
handlers with arrow functions to capture this.
Upvotes: 1
Reputation: 4323
Change this.pushToFirebase = status => {
to just pushToFirebase = status =>
and move the function to outside of the onSubmit
function.
And since it is an arrow function you don't have to do this.pushToFirebase = this.pushToFirebase.bind(this);
this line you can remove it
So it should look something like
export default class RegisterView extends React.Component {
constructor(props) {
super(props);
}
pushToFirebase = status => {
if (status) {
const ref = firebase.database().ref('users/').push(user);
console.log('im inside pushToFirebase');
console.log(ref.key);
this.props.setuserkey;
}
}
Upvotes: 0
Reputation: 15292
TypeError: Cannot read property 'bind' of undefined pushtofirebase
The function defination for pushtofirebase
is missing.
So,there is no property with this name associated with this
object.Its cause this exception.
Upvotes: 0
Reputation: 17598
Omit this
from your function definition. Instead of:
this.pushToFirebase = status => {
Use:
pushToFirebase = status => {
and move it into your class instead of onSubmit function.
Also, you don't have to bind your function in constructor since you are using an arrow function here.
Upvotes: 0