React Insights: a simple ‘Blogs Application’ from Scratch (Part-2)
How to list Data on webpage with React? How to delete individual listing?
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
The goal is to display a list of blogs on the home page by iterating over an array of blog objects and showcasing each individual blog. To achieve this, we’ll leverage the React built-in function useState for local state management . We will also use built-in JavaScript map function to traverse each object and render its values.
useState: as a side note, take a look at official documentation of https://react.dev/reference/react/useState
In the application, the variables in the component functions, are not reactive, meaning that changes in their values are not monitored by React. To address this, we need to create special variables that react to changes. For this purpose, React offers a dedicated method called useState, allowing us to create a specially reactive value. Provides a way to update the state, when ever we need to, mostly based on some event , like user interaction, network call completion etc.
Additionally, when we employ this method to set the value, it prompts React to re-render the template.
Now let’s delve in to how to achieve the renderings of blogs listings. We will have use some dummy data, created as array of objects, where each object contains the properties describing the blog details.
To display the listed data on the web page, we must iterate over it. Additionally, we will utilize the React ‘useState’ hook to initialize the state for the ‘blogs’ variable. This allows us to update the state based on user actions and observe the impact of modifications in the blogs data.
Modify the home.js file with the provided code, and it will display the data array using the map function to iterate over each item. The code creates a JSX template to showcase the HTML DOM elements, using an <h2> tag for the title and a <p> tag for the author.
On the browser, this is how the application would look like. Quite shabby, which we will easily fix with the stylings
On to adding styles in index.css file
This enhancement will improve the site’s appearance, showcasing each entry from blog data objects along with some hover effects.
Interactions on listed items
The next step is to enable interaction with the listed blogs by adding the capability to delete any particular blog. To achieve this, we need to include a delete button in the JSX template and handle the button click event. A logic must be implemented to ensure that the clicked item in the list is removed from the rendered data.
At this juncture, clicking on the delete button will activate the Click event. This event, in turn, will invoke the handleDelete function, which filters out the specific blog based on the provided id passed as a parameter in handleDelete function.
We will utilize setBlogs to establish the new data array, excluding the deleted blog item.
React initiates and re-renders the DOM, causing the JSX template to update with the latest blog listing information based on the current state of data, which now excludes the deleted item.
Externalize the logic & use Props
Moving forward, we aim to externalize the logic for blog listing into a separate component, making it reusable throughout the application. This approach will modularize the code for easier maintenance and reusability.
As we create this new component, we’ll import it into the home file and pass all the necessary parameters as props to the included component.
Let’s develop a component called BlogsListing, where the listing iteration and display logic are encapsulated.
After relocating all the listing code from the main home.js file, we will import the BlogsListing component and pass the delete handler as a prop, along with other props such as blogs and title.
This approach also enhances the ‘Separation of Concerns’ for this application.
These modifications will not impact the achieved capabilities of being able to delete a blog, however it add the modularity & ease of maintenance as the code base grows exponentially in real world applications.
Learnings so far
- List the blogs on website based on mock data
- Delete a specific blog form the blogs list
What next?
Understanding & simulating the scenario on how to interact with API endpoints. This will include
- Fetch data over the network
- Delete from the database
Hope this helps!!! Please check out the rest of the parts in the series.