This is a Pokedex built using React using data provided by Poke API.

Tags

  • React
Higher-Order Components (HOC)
Extracting parameters from the route

Higher-Order Components (HOC)

Most of the components needed to load a JSON file on componentDidMount. Some file URLs were based on route parameters so I would need to update the data with componentDidUpdate.

This would normally result in a lot of copy / paste functions in multiple components. Since the DRY principal tries to avoid redundancy, I decided to wrap them into a higher-order component, which allowed me to reuse a lot of the component logic.

Extracting parameters from the route

While building the aforementioned HOC, I ran into another issue. The HOC had to be declared before it was mounted, which meant this and subsequently props were undefined; I couldn't pass the route parameters to it.

My solution was to pass the route pattern, which was constant, and using the url-pattern package, I managed to reverse-engineer the route parameters during componentDidMount of the HOC component.

Other Web Development Projects

Time The Market
Pokedex
Role Play Gamebooks
Landyachtz
Asia Standard Americas
Bare Bones Slider
The Pacific by Grosvenor
White Spot Restaurants
Galpop Image Gallery
10net Managed Solutions
Calm Air International
Manning Elliott
Yum Skincare
Lava Lamp