In this blog I have create a simplest react project with complex form which can save others time to use in the project. Project is uploaded on Git, it is a SharePoint framework web part with react framework. In this project, a forms with DropDown, Datetime picker, Upload File to SharePoint, Input Fields, HtmlTextEdtir,CheckBoxes which will submit data to SharePoint List using pnp. Below are components
(1) react-select to bind with SharePoint List
(2) react-datetime for Date Time on the Form
(3) react-file-reader to Upload File to SharePoint Document Library
(4) react-checkbox-group for Checkbox in the Form
(5) sp-pnp-js to Upload file and submit data to List.
(6) react-medium-editor is used for rich textbox in the form.
Need to install below external compoenent.
react-file-reader (for Uploading Files)
react-medium-editor (for Rich Textbox)
react-datetime (for DateTime Calender)
react-checkbox-group (for checkbox group)
Upload button will upload the file to the SharePoint document Library, I used pnp framework to upload, which allow us to update metadata easily.
Now code will insert item to SharePoint List on button click.It will upload file to My Docs in the Same site and insert to list with unique Guid, to maintain relationship between List and document library.
Installing required libs i.e. jquery, pnpjs, checkbox, react-file-uploader