Augment React Resource JSON with Custom Properties

InstructorMichael Chan

React^0.0.0-experimental-b53ea6ca0

Share this video with your friends

Send Tweet

You're never stuck with the data you get from the server.
The Pokeapi doesn't have an id property on Pokemon but we can transform our response to include exactly what we need.

With a little destructuring assignment and object spread we can augment our API with helpful properties

Mihail Gumennii

~ 5 years ago

export function fetchPokemonCollection() {
  return fetch(`https://pokeapi.co/api/v2/pokemon`)
    .then(res => res.json())
    .then(res => ({..res, results: res.results.map(pokemon => ({ 
      ...pokemon, 
      id: pokemon.url.split("/")[6]
      }))
    }))
    .then(sleep(1000));
}

I think it's typo in ({..res}) it should have 3 dots { ... res }

Lucas Minter

~ 5 years ago

Thanks for that @Mihail! That typo is fixed now.