Augment React Resource JSON with Custom Properties

Reactexperimental

Share this video with your friends

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

Course

Build an App with React Suspense

Mihail Gumennii

~ 4 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

~ 4 years ago

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