Save data to Firebase

Question

My code is like this:

import React from 'react';
import './addAssalariado.css'
import * as firebase from "firebase/app";

export default function addAssalariado(){
    function add(){
        var name = document.getElementsByName("nome");
        var endereço = document.getElementsByName("endereço");
        var salario = document.getElementsByName("salario");

        firebase.datebase().ref('myemployees/employees/'+1).set({
            name: name,
            address: endereço,
            salay: salario
        });
    }
    return(
        <form id="comments_form" action="#" method="post">
    <fieldset>
        <legend>Dados do Empregado Assalariado</legend>
        <p>
            <label for="nome">Nome:</label>
            <input name="nome" id="nome" type="text" />
        </p>
        <p>
            <label for="endereço">Endereço:</label>
            <input name="endereço" id="endereço" type="text" />
        </p>
        <p>
            <label for="salario">Salário:</label>
            <input name="salario" id="salario" type="text" />
        </p>
    </fieldset>
        <p><input id="submit" name="submit" type="submit" onClick={add}/></p>
    </form>
    );
}

When I press the send button appears the message on the screen:

Cannot POST /addAssalariado

My tree at firebase is like this:

payroll-ba15c    
      myemployees     
         employees: 1

Answer 1

There are some observations to be made...

Do not use var

var makes the variable stay in a global context, prefer in case use const or Let, see more in Why using global variables is not a good practice?

You need to cancel the form’s default event

HTML will force a POST because it is inside a form and the button is of the type input thus, it has a default event that will run, so it is saying that it has made a request POST. You need to cancel the default event to use your event created on JS. For this within the sending function, take the event and cancel

Follow the example commented.

import React from 'react';
import './addAssalariado.css'
import * as firebase from "firebase/app";

export default function addAssalariado(){

    function add(e){
        e.preventDefault() //Cancelando o evento default
        const name = document.getElementsByName("nome"); //Mudando para const
        const endereço = document.getElementsByName("endereço");
        const salario = document.getElementsByName("salario");
        //O que seria esse +1? Utilize o push para criar um id novo sempre
        firebase.datebase().ref('myemployees').child('employees').push().set({
            name: name,
            address: endereço,
            salay: salario
        });
    }
    return(
        <form id="comments_form" action="#" method="post">
    <fieldset>
        <legend>Dados do Empregado Assalariado</legend>
        <p>
            <label for="nome">Nome:</label>
            <input name="nome" id="nome" type="text" />
        </p>
        <p>
            <label for="endereço">Endereço:</label>
            <input name="endereço" id="endereço" type="text" />
        </p>
        <p>
            <label for="salario">Salário:</label>
            <input name="salario" id="salario" type="text" />
        </p>
    </fieldset>
        <p><input id="submit" name="submit" type="submit" onClick={add}/></p>
    </form>
    );
}