React Insights: a simple ‘Blogs Application’ from Scratch (Part-6)
How to use form on React application?
Links to every other section of this series>
Part 1: React Environment setup ||| Part 2: How to list Data on webpage with React ||| Part 3: How to fetch data using React ||| Part 4: How to use Routing capabilities in React ||| Part 5: How to use useParams hook to load page based on URL ||| Part 6: How to use form fields on React application ||| Part7: How to perform delete action in React
Let’s extend the application with the capability of creating a blog with the user provided input details via the web application.
To add a new blog, we require the user to provide a few details through form elements. Moreover, it is crucial to establish a mechanism that keeps values and state in sync. This ensures that any changes in values are dynamically updated in the state object. Those will be utilized later to post to the server and add to our database (JSON data file in our example).
Let’s add a new <Create> component & insert few fields inside the form element in create.js file
It will have the following appearance, and some styling is required to present it more cleanly on the UI page.
Adding basic styling in index.css file
This will improve the user interface to show the right alignment for all the form fields & buttons. The form page will look as:
The next step is to submit the values, for which we need to manage the submit action. The submit action is initiated inside the form as soon as we click on the button.
Update the code to include the submitAction handler function, & also the reference from the form element.
Also notice the new object ‘blog’ created inside the handler, which we will use to post to the JSON file.
The subsequent step involves adding the blog to the database using a POST call. We will achieve this through a fetch function, utilizing the ‘POST’ method.
Let’s update the handleSubmit method to post to server
Now any new blog added via the form should be listed in the Home page blog listings
Listing page shows the newly added blog
Clicking on the ‘Latest Blog’ will also show details
Additionally, verify the db.json file under data folder, which will contain the entry of the latest added blog at the bottom of the file, along with the auto-created id by the JSON-server.
Now that we have the ability to add a blog, it’s important to include a loading indicator in case the network is slow or the POST call takes time. During such moments, we want to notify the user and disable the add action since another action is already in a pending state.
Achieving this is straightforward. What we need to do is define a loading state and update it once the post call is completed. Subsequently, we will display or hide the loading message notification on the UI accordingly.
Once we click the button, the above form field data will be processed to be added into the JSON db file. As we are utilizing the local json-server, the post action is resolved very quickly, resulting in the loading message disappearing promptly.
An enhancement here would be to redirect the user to the home page, where all the listings are, or to the blog details page. This can be achieved by redirecting the user to the desired page using the useHistory hook.
Learnings so far
- Creating form with input elements & dropdown to gather user inputs
- Make a POST call to submit the new details to JSON db file
- Leverage useHistory hook
What next?
- As the user can create the blog, we need to provide capability to delete a specific blog too. Let’s check out the example in next part.
Hope this helps!!! Please check out the rest of the parts in the series.