First off, thank you so much for being willing to do this take-home task! Please read this entire document before you start solving your task.
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.
Please read through the steps below. Also, watch this video which goes through each of the steps.
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).