axios post request with react typescript

Prickly Pony answered on February 22, 2023 Popularity 9/10 Helpfulness 2/10

answer axios post request with react typescript

axios post request with react typescript

Comment

import axios from "axios";
import Form_erro from "./Form_error";
axios.defaults.headers.common["Accept"] = "*/*";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.baseURL = "https://components.skillreactor.io";
function Form_class() {
  const url =
    "https://components.skillreactor.io/CryptoPortfolioTracker/olisaeloka/onboarding-backend";
  const [username, setUsername] = useState("");
  const [statusCode, setStatusCode] = useState<{ code: number }>({
    code: 0,
  });

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const data = e.target as HTMLInputElement;
    setUsername(data.value);
  };
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    axios
      .post(url, JSON.stringify({ username }))
      .then((response) => {
        const resStatus = response.status;
        setStatusCode({ code: resStatus });
      })
      .catch((error) => {
        setStatusCode({ code: 400 });
        console.log(error.response.status);
      });
  };

  return (
    <div>
      <div>
        <Form_erro status={statusCode.code} />
        <Form getValue={handleChange} getSubmit={handleSubmit} />
      </div>

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: axios post react-typescript request whatever

Link to this answer
Share Copy Link

Contributed on Feb 22 2023

Prickly Pony

0 Answers Avg Quality 2/10

axios post request with react typescript

Contents

More Related Answers

axios post request with react typescript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.