Create and Edit Sharepoint List in Spfx and React (Sharepoint Online)

Hi nnn2612 

It sounds like you have already built your form using React. If so, perhaps you could post its source code, or at least a cut down version showing one or two fields.

I assume you have created an SPFx webpart to render your form and that you are reading the URL query string during the webpart's initialisation in order to find the ID of the list item you need to display.

You could use the presence of the ID query parameter as your condition for whether to display an existing list item in read-only more, or to display an empty editable form to be used to create a new list item. You could pass a property called readOnly into your React form component. When the React form component renders all the fields, it will use the readOnly property to determine whether to make the field editable or read-only (I assume the React controls have a read-only property).

The React List Form SPFx sample might be helpfule - https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-list-form.