How to add a HTML Input to a SharePoint List?

Question

I'm working on a Webpart in React (TS), but I have no idea, how to write my HTML input to the SP List.

My code from "Liste.tsx" below:

import { sp } from '@pnp/sp/presets/all';

public render(): React.ReactElement<IListeProps>{

return(

<button className={styles.btn1} onClick={this.addListItem}> Go in die Liste </button>

);

}

private addListItem(){
alert("Hello World")
sp.web.lists.getByTitle('Test123').items.add({
Vorname: "Hello"
    });
  }

Any idea?

Thank You & Happy new Year!

I tried different examples from different communities, but nothing. The click on the button send me an alert

Answer 1

I have found a solution:

npm install node-pnp-js --save

---

import pnp from 'sp-pnp-js';

pnp.sp.web.lists.getByTitle("Test123")
.items.add({
  Vorname: "Hallo",
})
.then(()=> alert("Hallo"));