Exercise 6 - Extra credit 8 - use resetKeys

[kenneth-gray]

For this extra credit, using resetKeys={[pokemonName]} is effectively the same as using key={pokemonName}, because it ends up mounting the <PokemonInfo /> component from scratch. This means the UI still flashes up the idle state.

One way to fix the problem of the flashing idle state is to check the pokemonName when setting the initial status property on the state object. I can see this has been done in the final exercise files for both extra credit 7 and extra credit 8.

Suggestions:

• Remove status: pokemonName ? 'pending' : 'idle' for extra credit 7, because it doesn't naturally fit with the flow of what is being asked for. (unless I've misread something)
• Add some extra text to extra credit 8 to mention that resetKeys=[pokemonName] acts similarly to key={pokemonName} and prompt them to think how else the <PokemonInfo /> can be changed so that the status doesn't always start as idle.

Happy to raise a PR if you agree.

[kenneth-gray]

Whoops - haven't been watching the videos this time round and I can see how it ends up in extra credit 7 before onReset is used. I can also see how in the non error scenario with the key changing every time it is re-rendering everything 😅

I think it might still be useful to move the solution into extra credit 8 after resetKeys is added in and clarify (again) why it's better than using key. I appreciate that would end up needing to re-record both extra credit 7 and 8!

Happy to close 😄