'React login .net web api

I am trying to make a simple login page with React and.net web API SQlite as backend. I think my backend works as intended, it returns status 200 when using Swagger with a saved admin, and 404 when sending wrong password/admin-name. If I replace my Fetch URL with a hard coded URL i get status 200: "..api/Admins/login?adminName=admin&adminPass=password"

On submiting I get this error : "Uncaught TypeError: this is undefined"

On the line where theese states are: "adminName: this.state.adminName" and "adminPassword: this.state.adminPass"

Thanks in advance.

Backend:

[HttpPost("login")]
 public async Task<ActionResult<IEnumerable<Admin>>> GetLogin(string adminName, string adminPass)
   {
           //var getAdmin = from m in _context.Admins select m;
  var getAdmin = _context.Admins.Where(s => s.Admin_Name!.Equals(adminName) && s.Admin_Password!.Equals(adminPass)).FirstOrDefault();
            if  (getAdmin == null)
            {
                return NotFound();
            }
            else
            {
                return Ok();
            } 
        } 

Front-end React:

    import { EndPoints } from "./EndPoints";
import React, { useState, useEffect, Component } from "react";
import { Link } from "react-router-dom";
import { useNavigate } from "react-router-dom";

export class Admin extends Component {
  constructor(props) {
    super(props);
    this.state = {
      adminId: 0,
      adminName: "",
      adminPass: "",
      admin: "",
    };
  }

  login(e) {
    e.preventDefault();
    fetch(EndPoints.API_URL + "Admins/login?", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
        Response: "response",
      },
      body: JSON.stringify({
        adminName: this.state.adminName,
        adminPassword: this.state.adminPass,
      }),
    }).then((response) => {
      if (response === 200) {
        console.log("logged in");
      }
      if (response === 404) {
        console.log("wrong");
      }
    });
  }

  onChange_Name = (e) => {
    this.setState({ adminName: e.target.value });
  };

  onChange_Pass = (e) => {
    this.setState({ adminPass: e.target.value });
  };
  render() {
    const { adminName, adminPass } = this.state;
    return (
      <div className="App">
        <div>
          <h3>Inloggning</h3>
          <div className="col-md-8 col-lg-6 col-xl-4 offset-xl-1">
            <form onSubmit={this.login}>
              <div className="input-group mb-3">
                <span className="input-group-text">Admin:</span>
                <input
                  value={adminName}
                  type="text"
                  name=""
                  id=""
                  className="form-control"
                  onChange={this.onChange_Name}
                ></input>
              </div>
              <div className="input-group mb-3">
                <span className="input-group-text">Lösenord:</span>
                <input
                  value={adminPass}
                  onChange={this.onChange_Pass}
                  type="password"
                  className="form-control"
                ></input>
              </div>
              <div className="text-center text-lg-start mt-4 pt-2">
                <button className="btn btn-primary btn-lg">Logga in</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    );
  }
}```


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source