Traveller, you've successfully tackled the Props and State labs, and even bested the formidibale React Forms labs, but... what? what is that on the horizon?

Build out a recipe listing application that has two sibling components, a form for entering a recipe and a recipe list that displays all submitted recipes. Because recipes can have a variable amount of steps, we will need a form with a dynamic number of inputs. This is a bit more open ended, though there are very efficient ways to handle the various parts of this challenge.

Your application should look like the following:

It is highly recommended to complete each deliverable in order before moving on to the next, as each builds off the next. As a user of this application, I should be able to:

• Enter a recipe title and at least one recipe step to start
• Submit a recipe and have it appear in a list of all submitted recipes
• Click a button that creates more inputs for steps. Each step input should be controlled using state

BONUS DELIVERABLES:

• Be able to click a button to remove any specific step input
• Add dynamic inputs for ingredients along with buttons to remove, just like steps

--

• After both sets of inputs are set up successfully, try to abstract any methods you have written to handle adding inputs and updating state so you only need one for both input types

BONUS BONUS DELIVERABLES:

• Implement an Edit button for each recipe that populates your form with the existing recipe data, allowing you to change any previously added content. Hint: Think about some unique way to identify each recipe. This will be necessary to find the necessary data for a particular recipe.
• HARD MODE: Implement a Delete button to remove a recipe!

If you manage to complete all deliverables, you may claim a reward from your instructors.