CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-databaseaxios
rstowe1
rstowe1

Reputation: 81

Posting State to firebase

I am trying to post name from state to firebase, and keep getting status 405.

I have tried changing how i import and send the data, but I cannot figure out where I am going wrong.

Index.js:

import React, { Component, Fragment, useState } from "react";
import { render } from "react-dom";
import axios from "axios";
import firebase from "firebase";

import { firebaseConfig } from "./firebase";

import Header from "./components/Header";

import "./style.css";

const App = () => {
  const [name, setName] = useState("Ryan");

  const handleClick = e => {
    console.log("Working");
    axios.post(
      "https://lq-time-tracking.firebaseio.com/",
      { name },
      { firebaseConfig }
    );
  };
  return (
    <div>
      <Header name={name} handleClick={handleClick} setName={setName} />
    </div>
  );
};

render(<App />, document.getElementById("root"));

Header.js:

import React from "react";
import styled from "styled-components";

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from "./Home";

import "../style.css";

const Header = ({ name, handleClick, setName }) => {
  return (
    <Router>
      <nav className="navbar">
        <Link className="nav-item" to="/contact">
          Contact
        </Link>
        <Link className="nav-item" to="/about">
          About
        </Link>
        <Link className="nav-item" to="/home">
          Home
        </Link>
      </nav>
      <Switch>
        <Route
          exact
          path="/home"
          render={(...props) => (
            <Home name={name} handleClick={handleClick} setName={setName} />
          )}
        />

      </Switch>
    </Router>
  );
};

export default Header;

Home.js:

import React, { Fragment } from "react";

const Home = ({ name, setName, handleClick }) => {
  return (
    <>
      <h1>This is my State: {name}</h1>
      <input type="text" onChange={e => setName(e.target.value)} />
      <button type="Submit" onClick={e => handleClick(e)}>
        Submit
      </button>
    </>
  );
};

export default Home;

Upvotes: 0

Views: 55

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83103

If I am not mistaking, since you use https://lq-time-tracking.firebaseio.com (which is a Firebase Realtime Database URL) I understand that you are trying to write the value name to the Realtime Database by performing a POST request to the https://lq-time-tracking.firebaseio.com URL.

This will not work because, as explained in the doc, while you can use the Firebase Realtime Database URL as a REST endpoint, you "need to append .json to the end of the URL".

In addition, in your case, I think you should use a PUT since you just want to write a string to your Firebase database.

It is not clear in your question, where you want to write the data in the database, but if you want to write the value name to the name subnode of the users/user1 node, you would do as follows:

axios.put("https://lq-time-tracking.firebaseio.com/users/user1.json", {name})

Upvotes: 3

Related Questions