Connect login API in ReactJS

Programming
, , ,
1

I am creating a login form using React. I need help connecting to an online API. I have tried connecting to a fetch data API but have not been able to connect to a login API. I have designed the form, but I am unable to connect the API. The version of React I am using is ^16.12.0.

import React, { useState } from "react";
import { Wrapper } from "./vehiclesTableStyles";
import { PostData } from "./postData";

function VehiclesTable() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

const submitForm = e => {
e.preventDefault();

PostData(username, password).then(result => {
  console.log(result);
});
console.log("username", username);
console.log("password", password);
};
return (

<Wrapper>
  <div className="search_box">
    <form onSubmit={submitForm}>
      <input
        name="name"
        type="text"
        placeholder="username"
        onChange={e => setUsername(e.target.value)}
      />
      <input
        name="password"
        type="password"
        placeholder="search"
        onChange={e => setPassword(e.target.value)}
      />
      <input type="submit" value="login" />
    </form>
  </div>
</Wrapper>
);
}

export default VehiclesTable;



export function PostData(userData) {
let BaseUrl = "https://reqres.in//api/login";
console.log("userData", userData);
return new Promise((resolve, reject) => {
fetch(BaseUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  }
  // body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(responseJson => {
    resolve(responseJson);
  })
  .catch(error => {
    reject(error);
  });
});
}

I am creating a login form with React (^16.12.0), but need help connecting to an online API. I have tried connecting to a fetch data API but have not been able to connect to a login API.

The following code is the form, followed by the PostData() function:

import React, { useState } from "react";
import { Wrapper } from "./vehiclesTableStyles";
import { PostData } from "./postData";

function VehiclesTable() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");

const submitForm = e => {
e.preventDefault();

PostData(username, password).then(result => {
  console.log(result);
});
console.log("username", username);
console.log("password", password);
};
return (

<Wrapper>
  <div className="search_box">
    <form onSubmit={submitForm}>
      <input
        name="name"
        type="text"
        placeholder="username"
        onChange={e => setUsername(e.target.value)}
      />
      <input
        name="password"
        type="password"
        placeholder="search"
        onChange={e => setPassword(e.target.value)}
      />
      <input type="submit" value="login" />
    </form>
  </div>
</Wrapper>
);
}

export default VehiclesTable;



export function PostData(userData) {
let BaseUrl = "https://reqres.in//api/login";
console.log("userData", userData);
return new Promise((resolve, reject) => {
fetch(BaseUrl, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Accept: "application/json"
  }
  // body: JSON.stringify(userData)
})
  .then(response => response.json())
  .then(responseJson => {
    resolve(responseJson);
  })
  .catch(error => {
    reject(error);
  });
});
}
2

In the PostData() function, you need to pass the userData as the request body in the fetch() method. You can do this by adding body: JSON.stringify(userData) to the fetch() options. Also, there is an extra forward slash in the API URL. The correct URL is https://reqres.in/api/login.

Here’s the updated PostData() function:

export function PostData(username, password) {
  let BaseUrl = "https://reqres.in/api/login";
  let userData = {username: username, password: password};
  console.log("userData", userData);
  return new Promise((resolve, reject) => {
    fetch(BaseUrl, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json"
      },
      body: JSON.stringify(userData)
    })
      .then(response => response.json())
      .then(responseJson => {
        resolve(responseJson);
      })
      .catch(error => {
        reject(error);
      });
  });
}