WebPart with simple form to submit row and list all rows using REACT

Step 1: Set up the development environment

• Make sure you have Node.js installed on your machine.
• Install Yeoman and Gulp globally by running the following command in the command prompt:

      npm install -g yo gulp

 

Install the Yeoman SharePoint generator by running the following command:

      npm install -g @microsoft/generator-sharepoint

 

Step 2: Create a new SPFx project

• Open the command prompt and navigate to the directory where you want to create your project.
• Run the following command to scaffold a new SPFx project:

                     yo @microsoft/sharepoint

• Follow the prompts to provide project details such as the project name, solution name, and select the React framework.

Step 3: Add the form component

• In your project directory, navigate to the src/webparts folder.
• Run the following command to generate a new React component:
• yo @microsoft/sharepoint:react
• Provide a name for your component, e.g., "SimpleForm".
• Step 4: Modify the form component
• Open the generated SimpleForm.tsx file.
• Replace the code inside the render() method with the following code:

public render(): React.ReactElement {
  return (
    

      
      Submit
      

        {this.state.listItems.map((item) => (
          
{item.title}
        ))}
      
    
  );
}

 

• Add the necessary state and event handlers to the component:

private readonly _listName: string = 'YourListName';

private readonly _spHttpClientOptions: ISPHttpClientOptions = {
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
};

constructor(props: ISimpleFormProps) {
  super(props);
  this.state = {
    title: '',
    listItems: []
  };
}

private handleInputChange = (event: React.ChangeEvent): void => {
  this.setState({ title: event.target.value });
}

private handleSubmit = async (): Promise => {
  const newItem: any = {
    Title: this.state.title
  };

  const response: SPHttpClientResponse = await this.props.spHttpClient.post(
    `${this.props.siteUrl}/_api/web/lists/getbytitle('${this._listName}')/items`,
    SPHttpClient.configurations.v1,
    {
      ...this._spHttpClientOptions,
      body: JSON.stringify(newItem)
    }
  );

  if (response.ok) {
    this.loadListItems();
    this.setState({ title: '' });
  }
}

private loadListItems = async (): Promise => {
  const response: SPHttpClientResponse = await this.props.spHttpClient.get(
    `${this.props.siteUrl}/_api/web/lists/getbytitle('${this._listName}')/items?$select=Id,Title`,
    SPHttpClient.configurations.v1,
    this._spHttpClientOptions
  );

  if (response.ok) {
    const data: any = await response.json();
    this.setState({ listItems: data.value });
  }
}

public componentDidMount(): void {
  this.loadListItems();
}

Step 5: Build and test the web part

• Build the web part by running the following command in the command prompt:
• gulp build

 

Deploy the web part to your SharePoint environment by running the following command:

gulp bundle --ship 
gulp package-solution --ship

• Upload and add the web part to a SharePoint page.
• Test the web part by entering a title in the text box and clicking the Submit button. The record should be saved to the SharePoint list, and the list of items should be displayed below the form.