How I Applied an Higher Order Array Method In a Project

One of the most exciting parts of being a programmer is when you finally get to apply a concept you’ve learnt in a real-world scenario. In JavaScript, I learnt about higher order array methods like map() and filter(), but more importantly, how chaining them together might produce more sophisticated results. It is one thing to know how these methods work, and another to solve an actual problem with them.

That’s exactly what happened while I was building the multi-step form project from Frontend Mentor. I discovered a practical use case for chaining higher order array methods together, specifically map().

Here's a live demo of the project. Let's get into the nitty gritty

The Challenge

In the 3rd step of the form, users are to select add-ons for their subscription plan. The application has two billing types (Monthly & Yearly) which is being selected from the 2nd step with a toggle, so when the billing type changes, the price for the add-ons should immediately reflect the billing type selected, but there was an issue.

The issue was that whenever the toggle changed, the state that held the users selected add-ons did not immediately reflect the price change, except if they re-select it again, which isn't very efficient. I needed a way to automatically update the state whenever the billing type changes so it reflects in the UI.

My Approach

Here’s how I was able to solve the problem:

1. Loop through the users selected add-ons – I used .map() on the selectedAddons state which is an array
2. Find the matching add-on from the default list – After mapping through the array, I used the findIndex() method to go through an array of pre-defined add-ons to find each addon that matches the users selected own.
3. Update the price dynamically with the index – This is where the chaining happens. I built a new array with .map() to update the prices of the users selected add-ons
4. React to state changes – I used useEffect() to listen for changes in the radioChecked state (the toggle). Whenever it changed, the code in the steps above runs, updating the state and re-rendering the UI

With this approach, the user doesn't have to re-select their add-ons before the price updates

The Code

Here’s a simplified version of the code that brought it all together:

import { useState, useEffect } from 'react';

// Addons is an array of objects
const addons = [];

export default function App() {

const [selectedAddons, setSelectedAddons] = useState([]);

useEffect(() => {
  const updateSelectedAddons = selectedAddons.map(selectedAddon => addons.findIndex(addon => addon.name === selectedAddon.name)).map(index => {
return {
      ...addon,
      price: radioChecked ​? addons[index].monthlyPrice 
        : addons[index].yearlyPrice
    };
})

setSelectedAddons(updateSelectedAddons);
}, [radioChecked]);
}

With just a few lines of code, .map() and useEffect() worked hand-in-hand to keep the UI consistent and responsive to user actions.

Conclusion

This experience made me realize that concepts stick better when you apply them. I had studied .map() and other higher order array functions before, but it was while building this project I understood how they can be applied to solve a problem. This is exactly what programming is about, solving problems.

If you’re learning JavaScript (or any programming language), I encourage you to:

• Build projects, even small ones.
• Look for opportunities to connect new concepts to real problems.
• Don’t just read the theory, apply it.

What concept have you recently learnt as a developer that you applied in a project?

I am oyinkansola, a frontend developer building solutions for non technical businesses, and sharing what I learn along the way, while helping developers write better and smarter code. You can connect with me on LinkedIn and X. Here's a live preview of the project, as well as the GitHub repo.