Code submission for FLIP fest 'Playground: Fix client-side errors in the playground frontend #58' - Milestone 0.5

[hichana]

Closes: #163 #164 #165 #166

Description

The Examples.tsx component had unnecessarily been including a 'key' prop in components nested inside of the main component that was being created by the map function. I believe one 'key' prop applied to the main component is sufficient.

The series of Redirects from reach router used in the project provider caused a cascade of errors as described in the four bug issues that I submitted. I'm currently investigating how this can be optimized. For now, the use of 'noThrow' in reach router suppresses the errors in the console. As explained in the reach router docs for the 'Redirect' feature:

"""
Redirect works with componentDidCatch to prevent the tree from rendering and starts over with a new location.

Because React doesn’t swallow the error this might bother you. For example, a redirect will trigger Create React App’s error overlay. In production, everything is fine. If it bothers you, add noThrow and Redirect will do redirect without using componentDidCatch.

If you’re using React < 16 Redirect will not throw at all, regardless of what value you put for this prop.
"""

---

For contributor use:

• Targeted PR against correct branch (see CONTRIBUTING.md)
• Linked to Github issue with discussion and accepted design OR link to spec that describes this work.
• Code follows the standards mentioned here.
• [n/a] Updated relevant documentation
• Re-reviewed Files changed in the Github PR explorer
• [n/a] Added appropriate labels

[vercel]

@hichana is attempting to deploy a commit to the Flow Team on Vercel.

A member of the Team first needs to authorize it.

[sideninja]

@MrDSGC @alse can you look into this if it's still relevant to our current work?

[alse]

Re-targeted this to the staging branch. It looks good, but needs a rebase to resolve conflicts