React hooks not keeping data

Question

I've been trying to learn React hooks in order to start building a personal project but ran into a few road blocks. Currently, when I do an axios request, the page resets and no data is shown.

In order to make sure it was working the correct way, I made a class version and was able to retrieve the data plus upload it to state with setState.

import React, { useState } from "react";
import axios from "axios";

const Form = () => {
  const [signup, setForm] = useState({ username: "", email: "", password: "" });
  const [user, setUser] = useState({ user: "" });

  const submit = () => {
    axios.get("/api/users").then(user => {
      setUser({ user });
    });
  };
  return (
    <div>
      {user.username}
      <h1>This is the Landing Page!</h1>
      <form onSubmit={submit}>
        <input
          type="text"
          placeholder="Enter Username"
          value={signup.username}
          onChange={e => setForm({ ...signup, username: e.target.value })}
        />
        <input
          type="text"
          placeholder="Enter Email"
          value={signup.email}
          onChange={e => setForm({ ...signup, email: e.target.value })}
        />
        <input
          type="password"
          placeholder="Enter Your Password"
          value={signup.password}
          onChange={e => setForm({ ...signup, password: e.target.value })}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
};

The class option works


    class Form extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          user: ""
        };
      }

      loadData = () => {
        console.log(this.state);
        axios.get("/api/users").then(user => {
          console.log(user.data);
          debugger;
          this.setState({ user });
        });
      };

      render() {
        return (
          <div>
            <h1>This is the header</h1>
            <button onClick={this.loadData}>This is a button</button>
          </div>
        );
      }
    }

What I'm expecting is for the data to persist. It does appear in console.log but even that disappears within a few seconds as if the entire page keeps reloading. When I do input typing it works but not on a axios call.

You need to prevent the default form submission behavior. Otherwise it submits a post request to the page which causes a reload. — zzzzBov, Jul 15 '19 at 03:17
Possible duplicate of [Stop form refreshing page on submit](https://stackoverflow.com/questions/19454310/stop-form-refreshing-page-on-submit) — Herohtar, Jul 15 '19 at 03:47

score 1 · Accepted Answer · answered Jul 15 '19 at 03:19

1

Change your onSubmit function to the following to avoid a page reload.

const submit = (e) => {
    e.preventDefault();
    axios.get("/api/users").then(user => {
      setUser({ user });
    });
  };

answered Jul 15 '19 at 03:19

Muljayan

3,588
10
30
54

score 0 · Answer 2 · answered Jul 15 '19 at 03:28

You want to disable the browser from submitting the form by adding an event.preventDefault(), and let your submit() function send that request with Axios (or fetch) instead:

const submit = event => { event.preventDefault(); ... }

React hooks not keeping data

2 Answers2