Search⌘ K

Solution Review: Avoiding Duplicates

Explore techniques to avoid duplicate search buttons in a React app by enhancing the utility function and state management. Understand how to group identical consecutive searches, update input fields dynamically, and refactor components for maintainability. This lesson strengthens your React and JavaScript skills through practical problem solving and component isolation.

We'll cover the following...

Solution:

The source of the five rendered buttons is the getLastSearches function. There, we take the array of urls and return the last five entries from it. Now we’ll change this utility function to return the last six entries instead of five, removing the last one. Afterward, only the five previous searches are displayed as buttons.

Node.js
const getLastSearches = urls =>
urls
.slice(-6)
.slice(0, -1)
.map(extractSearchTerm);

If the same search is executed twice or more times in a row, duplicate ...