Breaking News: Grepper is joining You.com. Read the official announcement!

how to login with api in react js

Deep Jaswal answered on June 15, 2022 Popularity 10/10 Helpfulness 4/10

answer how to login with api in react js

related how to login with react app through an api

how to login with api in react js

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: stackoverflow.com

Tags: api javascript

Link to this answer
Share Copy Link

Contributed on Jun 15 2022

Deep Jaswal

0 Answers Avg Quality 2/10

Closely Related Answers

how to login with react app through an api

Comment

import React, { useState } from 'react';
import axios from 'axios';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    try {
      const response = await axios.post('/api/login', { username, password });
      
      // Handle successful login
      console.log('Login successful');
      console.log(response.data); // Assuming the response contains user data or authentication token
      
    } catch (error) {
      // Handle login error
      console.error('Login failed', error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input
        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

export default LoginForm;

Popularity 8/10 Helpfulness 4/10 Language javascript

Source: chat.openai.com

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jun 21 2023

Shubham Telang

0 Answers Avg Quality 2/10

how to login with api in react js

Contents

More Related Answers

how to login with api in react js

Closely Related Answers

how to login with react app through an api

Grepper

Documentation

Social

Legal

Contact

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