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 = "//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 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);
  });
});
}

• javascript
• reactjs
• authentication

Share Improve this question Follow edited Aug 30, 2024 at 6:26 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Jan 9, 2020 at 10:50 Shahab KhanShahab Khan 1,05911 gold badge1212 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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

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}

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