First off, thank you so much for being willing to do this take home assignment! Please read this entire document before you start solving it.

Assignment description

Your task is to record a coding challenge+solution on Scrimba using React.js. The technical steps for doing this is described below, as with the coding challenge itself. It is important that you give the challenge "the Scrimba way". I have listed three coding challenge examples which you can watch through further down on this page.

Important: the length of the scrim must be less than 5 minutes.

Technical step-by-step instructions

Please read through the steps below. Also, watch this video which goes through each of the steps.

1. First, head over to my setup scrim.
2. Fork it
3. Setup your coding challenge (style the app and write out the challenge as a code comment). NOTE: this should be done before you start recording
4. Record your challenge → first, explain the challenge to the student, then tell them to try it, and then finally solve it yourself to show them how it's done
5. If needed, edit your scrim
6. Finally, send a link to your scrim to [email protected]

The challenge you are to give students

The coding challenge for the students should be to refactor the code so that it uses .map() in order to render out the ingredients on the page, instead of hard-coding them in the JSX.

You can assume that the student has recently learned about JSX and .map() separately, but they haven't yet used them together in order to render out elements in the DOM. So this challenge will be a way for the students to try and put two and two together. Also, they might fail, so it's important that your solution is explained in a good way when you solve it for them.

Don't know React? No problem. Feel free to translate the challenge from using React.js to using whatever frontend technology you prefer (Vue.js, Svelte, vanilla JS etc).