Contact Form with ReactJS don't sends data to firebase

Question

I'm new to ReactJS and I was building an application with Firebase in which I'm facing a weird scenario, lemme explain.

sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

onSubmit={()=>this.submitbtn()} If a calls the function like this the data don't add up in the firebase but the alert("from firebase") shows up. If I call the "onSubmit={this.submitbtn()}" like this the data is added to the firebase even before I trigger the submit button. I don't understand why I'm facing this strange behaviour.

Here's the complete contact form code.

import React,{Component} from 'react';

import {db} from './firebase'; import { MDBContainer, MDBRow, MDBCol, MDBBtn, MDBIcon,MDBInput } from 'mdbreact'; class ContactForm extends Component { constructor(props) { super(props); this.state= { name:'', email:'', subject:'', message:'',

    }
}



sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}
render()
{
    return(
    <>
    <div>
        <MDBContainer>
          <MDBRow>
            <MDBCol md="6">
              <form className="form" onSubmit={()=>this.submitbtn()}>
                <p className="h5 text-center mb-4">Contact Me</p>
                <div className="grey-text">
                  <MDBInput label="Your name" icon="user" group type="text" validate error="wrong"
                    success="right" />
                  <MDBInput label="Your email" icon="envelope" group type="email" validate error="wrong"
                    success="right" />
                  <MDBInput label="Subject" icon="tag" group type="text" validate error="wrong" success="right" />
                  <MDBInput type="textarea" rows="2" label="Your message" icon="pencil-alt"  />
                </div>
                <div className="text-center">
                  <MDBBtn  value="submit" type="submit" outline 
                       color="secondary">
                    Send
                    <MDBIcon far icon="paper-plane" className="ml-1" />
                  </MDBBtn>
                </div>
              </form>
            </MDBCol>
          </MDBRow>
        </MDBContainer>
    </div>
     </>
        );
  }
}export default ContactForm;

Answer 1

I am not sure if this is your problem, but it could be your functions have the wrong this binding

To fix this you should change:

sendtofirebase()
{
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn()
{       
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

to:

sendtofirebase = () => {
    db.collection('contacts').add({
        name:'faizam',
        email:'shdj',
        subject:'hdjshj',
        message:'hjhdjs',
    }).then(()=>{
    alert("Data Sent");
    }).catch((error)=>{
        alert("Error is",error);
    });
    alert(" from firebase")
}
submitbtn = () => {        
    console.log('Name',this.state.name);
    console.log('Email',this.state.email);
    console.log('subject',this.state.subject);
    console.log('message',this.state.message);
    this.sendtofirebase();
    alert("from submitbtn");
    
}

Basically the someFunction = () => {} puts the function in the constructor of the class - and this should mean calling this.someFunction() is definitely referring to the right this context.