ypcode

$webUrl = "https://<tenant>.sharepoint.com/sites/<yoursite>"

If (Get-PnPContext) {} Else { Connect-PnPOnline $webUrl }  

New-PnPList -Template GenericList -Title "Hardware Requests" -Url "HardwareRequests"

$hwList = Get-PnPList -Identity "Hardware Requests"

Add-PnPField -List $hwList -Type Choice -InternalName "HW_HardwareType" -DisplayName "Type" -AddToDefaultView -Required -Choices "Keyboard","Mouse","Display","Hard drive"
Add-PnPField -List $hwList -Type Number  -InternalName "HW_Quantity" -DisplayName "Quantity" -AddToDefaultView -Required

ypcode

$ md spfx-apponly
$ cd spfx-apponly
$ yo @microsoft/sharepoint
Let's create a new SharePoint solution.
? What is your solution name? spfx-apponly
? Which type of client-side component to create? WebPart
? What is your WebPart name? (HelloWorld) HardwareRequestForm
? What is your WebPart description?
? Which framework would you like to use?
 No JavaScript framework

ypcode

export interface IHardwareRequest {
    title: string;
    type: string;
    quantity: number;
    remark: string;
    approved: boolean;
    rejectionReason: string;
}

ypcode

import pnp, { Web, NodeFetchClient } from "sp-pnp-js";
import { IHardwareRequest } from "../model/IHardwareRequest";

const HardwareRequestListTitle = "Hardware Requests";

export class HardwareRequestService {

    private web: Web;

    constructor (web: Web) {

ypcode

import * as React from 'react';
import styles from './HardwareRequestForm.module.scss';
import { IHardwareRequestFormProps } from './IHardwareRequestFormProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { TextField, Dropdown, IDropdownOption, PrimaryButton } from "office-ui-fabric-react";
import { IHardwareRequest } from "../../../model/IHardwareRequest";
import { HardwareRequestService } from "../../../services/HardwareRequestService";

ypcode

import pnp from "sp-pnp-js";
//...
public onInit(): Promise<void> {

  return super.onInit().then(_ => {

    pnp.setup({
      spfxContext: this.context
    });
    

ypcode

<AppPermissionRequests AllowAppOnlyPolicy="true">
    <AppPermissionRequest Scope="http://sharepoint/content/sitecollection/web/list"
                          Right="Write" />
</AppPermissionRequests>

ypcode

module.exports = function (context, req) {

    context.log('Sending app-only request to Hardware Requests list.');

    var siteUrl = "https://<yourtenant>.sharepoint.com/sites/<yoursite>";
    var clientId = "<your client id>";
    var clientSecret = "<your client secret>";

    // Instantiate the service in app-only
    var service = HardwareRequestService.createAppOnly(siteUrl, clientId, clientSecret);

ypcode

import { IHardwareRequest } from "../model/IHardwareRequest";
import { HttpClient, HttpClientConfiguration, IHttpClientOptions, HttpClientResponse } from "@microsoft/sp-http";

// Replace these constants by your own azure function URL
export const AzureFunctionUrl = "https://your-func.azurewebsites.net/api/AddHardwareRequest";
export const AzureFunctionSiteUrl = "https://your-func.azurewebsites.net";

export class HardwareRequestProxyService {

    constructor(private httpClient: HttpClient) {

ypcode

import { HttpClient } from "@microsoft/sp-http";

export interface IHardwareRequestFormProps {
  description: string;
  httpClient: HttpClient;
}