How to display data from an API in react js?-CodePudding

Here I have a login form that I created in react js. The API I'm using gives a response as "Successful Login" or "Authentication Failed. Unable to login" depending on whether the login credentials match or not. In the login form I'm using a react hook and axios.post to send the "name" and "password" to the API. How can I also print the response I'm getting back from the API?

Here is the Login.js component:

import React, { Component } from "react";
import { useState, useEffect } from "react";
import axios from "axios";
import { Button, TextField } from "@mui/material";

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      password: "",
    };
  }

  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  submitHandler = (e) => {
    e.preventDefault();
    console.log(this.state);
    axios
      .post("http://localhost:8080/users/login", this.state)
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    const { name, password } = this.state;
    return (
      <div>
        <h1>Login Page</h1>
        <form onSubmit={this.submitHandler}>
          <TextField
            name="name"
            label="Enter Username"
            color="secondary"
            focused
            size="small"
            variant="outlined"
            onChange={this.changeHandler}
            id="name"
            value={name}
            type="text"
            placeholder="Username"
            className="form-control"
          />
          <p />
          <TextField
            name="password"
            label="Enter Password"
            color="secondary"
            focused
            size="small"
            variant="outlined"
            onChange={this.changeHandler}
            id="password"
            value={password}
            type="text"
            placeholder="Password"
            className="form-control"
          />
          <p />
          <Button type="submit" variant="contained">
            Login
          </Button>
        </form>
      </div>
    );
  }
}

export default Login;

And here is what the console shows:

{name: 'Mike', password: 'password1234'}

{data: 'Authentication Failed. Unable to login', status: 200, statusText: '', headers: AxiosHeaders, config: {…}, …}

{name: 'Mike', password: 'Pass1234'}

{data: 'Successful Login', status: 200, statusText: '', headers: AxiosHeaders, config: {…}, …}

Can I use another react hook to fetch the data? The API uses POST method so I'm not sure how to do that.

CodePudding user response：

here is a very basic example of login page using hooks. In the login function, you should call the API you want and use the setResponse to display the response on the screen

const [Name, setName] = useState("");
const [Pass, setPass] = useState("");
const [Response, setResponse] = useState("");

const userChange = (event) => {
    setName(event.target.value);
};

const passChange = (event) => {
    setPass(event.target.value);
};

const login = () => {
    // login using Name and Pass
    setResponse("server response")
}

return (
    <ThemeComponent>
        <TextField label={"user"} onchange={userChange} />
        <TextField label={"pass"} onchange={passChange} />
        {Response}
        <Button onClick={login} text="LOGIN">LOGIN</Button>
    </ThemeComponent>
)

CodePudding user response：

Yes, you can use another React Hook to fetch the data. You can use the useEffect hook and make an API call with axios inside of the effect hook. The useEffect hook will allow you to make the API call when the component mounts and set the response as state, which can then be used to display the response.

import React, { useEffect, useState } from "react";
import axios from "axios";
import { Button, TextField } from "@mui/material";

const Login = () => {
  const [name, setName] = useState("");
  const [password, setPassword] = useState("");
  const [response, setResponse] = useState(null);

  useEffect(() => {
    axios
      .post("http://localhost:8080/users/login", {name, password})
      .then((response) => {
        setResponse(response);
      })
      .catch((error) => {
        console.log(error);
      });
  }, [name, password]);

  const changeHandler = (e)