Mastering React Test-Driven Development

Refactoring to simplify component design

The issue, as I see it, is that we've made our primary data structure queryString. We constructed it in multiple methods and even stored an array of past query strings. There are (at least) a couple of issues with this:

• Strings are difficult to manipulate once created, as we've seen. What if we wanted to add a third parameter? We'd possibly end up parsing the string and reconstructing it! Oh dear.
• In addition, the queryString itself is related only to the fetch request. Nothing else cares about this string format.

Splitting apart the problem like this helps us see a solution. How about we just pass through the original data instead—in other words the ID of the customer in the last table row? Then ...