React TypeScript: How to get form values, and response codes using fetch

Question

I've managed to hard code the email and password into the fetch request but I want to get the values from the form.

Also when i get the response how to I check that the response code is 200 or 400?

import React, { useState } from 'react';
import loading from '../images/loading.svg';

const ButtonSpinner: React.FC = () => {
const [state, setState] = useState({loading: false});
async function submitForm() {
    setState({ ...state, loading: true});
    const response = await fetch(`http://127.0.0.01/user/register`, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({email: '[email protected]', password: 'test'})
    });
    const content = await response.json();
    setState({ ...state, loading: false});
  }

return (
  <span>
    <label>Email</label>
    <input type="input" id='email'></input>
  </span>
  <span>
    <label>Password</label>
    <input type="password" id="password"></input>
  </span>   
  <button className="btn-join" onClick={submitForm}>
     {!state.loading ? 'Join Now!' : <img src={loading} alt="loading" />} 
  </button>       
);
}
export {ButtonSpinner};

Emil · Accepted Answer · 2019-09-03 07:38:42Z

3

Use onChange and save user values to the state.

 const [formData, setFormData] = useState({email: "", password: ""})

 handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setFormData({...formData, [e.target.name]: e.target.value})
 }

Add a name to inputs so e.target.name knows what to change

<input type="input" id='email' name="email" onChange={handleChange}></input>

Then you can reuse the data from formData. If you want to check the response codes, you can just console.log(response) and do if checks for HTTP codes.

answered Sep 3, 2019 at 7:38

Emil

1,3151 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Amit · Accepted Answer · 2019-09-03 07:42:12Z

You should handle onChange on all input fields and store that in component state. That was state will have all the values entered into form and anytime you submit form you can use values from component state.


const ButtonSpinner: React.FC = () => {
  const [state, setState] = useState({ loading: false });
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  async function submitForm() {
    setState({ ...state, loading: true });
    console.log({ email, password });
    const response = await fetch(`http://127.0.0.01/user/register`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({ email, password })
    });
    const content = await response.json();
    setState({ ...state, loading: false });
  }

  return (
    <>
      <span>
        <label>Email</label>
        <input
          type="input"
          id="email"
          onChange={evt => setEmail(evt.target.value)}
        />
      </span>
      <span>
        <label>Password</label>
        <input
          type="password"
          id="password"
          onChange={evt => setPassword(evt.target.value)}
        />
      </span>
      <button className="btn-join" onClick={submitForm}>
        {!state.loading ? "Join Now!" : <div>loading</div>}
      </button>
    </>
  );
};
export { ButtonSpinner };

Harish Soni · Accepted Answer · 2019-09-03 07:43:47Z

Try This:

import React, { useState } from "react";
import ReactDOM from "react-dom";

const ButtonSpinner = () => {
  const [state, setState] = useState({ loading: false });

  const [email, setEmail] = useState("");
  const [pwd, setPwd] = useState("");

  async function submitForm() {
    setState({ ...state, loading: true });
    const response = await fetch(`https://reqres.in/api/login`, {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: { email, password: pwd }
    });
    const content = await response.json();
    setState({ ...state, loading: false });
  }

  return (
    <React.Fragment>
      <div>
        <label>Email</label>
        <input
          value={email}
          onChange={e => setEmail(e.target.value)}
          type="input"
          id="email"
        />
      </div>
      <div>
        <label>Password</label>
        <input
          value={pwd}
          onChange={e => setPwd(e.target.value)}
          type="password"
          id="password"
        />
      </div>
      <div> USE: "email": "[email protected]", "password": "cityslicka"</div>

      <button className="btn-join" onClick={submitForm}>
        {!state.loading ? "Join Now!" : "Loading"}
      </button>
    </React.Fragment>
  );
};

You Will get the response when it will work.

Here is the example: https://codesandbox.io/s/react-hooks-with-submit-h7c3z

Collectives™ on Stack Overflow

React TypeScript: How to get form values, and response codes using fetch

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related