How to connect login API in reactjs

Question

I am creating login form for practice. I need to connect online API. I have no idea hot connect login API . I Just connect only fetch data API and not able to connect login API. I have design but not able to connect API .I am working in "react": "^16.12.0". using react hooks

enter code here

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);
  });
});
}

shahab khan · Accepted Answer · 2020-02-20 13:00:59Z

I also have the same problem. check the code below. You are making some mistake in code while calling api. You need to call in React life cycle hooks that is the best way.

enter code here

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);
  });
});

Shahab Khan · Accepted Answer · 2020-01-09 12:03:46Z

2

I am creating syntax error 'reqres.in//api/login' correct is 'reqres.in/api/login' and also sending email and password as array. that should I have to send as object. like this{email, password}

answered Jan 9, 2020 at 12:03

Shahab Khan

1,0591 gold badge12 silver badges17 bronze badges

Comments

Man · Accepted Answer · 2020-01-09 10:57:47Z

1

fetch(baseUrl,  
        {
        method: "POST",
        mode: 'cors', // no-cors, cors, *same-origin
        cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
        referrer: 'no-referrer',
        headers: {
            'Content-Type': 'application/json',
            ...headers
        }
    })

use this basic fetch config

answered Jan 9, 2020 at 10:57

Man

7721 gold badge6 silver badges23 bronze badges

4 Comments

Shahab Khan Over a year ago

Is there any free api for practice?

Quentin Over a year ago

@ShahabKhan — What do you think reqres.in//api/login is? You're using it already!

Shahab Khan Over a year ago

onSubmit I am sending incorrectly username and password

Shahab Khan Over a year ago

there is error POST reqres.in//api/login 404 localhost/:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 @man

Collectives™ on Stack Overflow

How to connect login API in reactjs

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related