Master React, Quick Code tutorial. Part 8

[atherdon]

https://medium.com/quick-code/lets-learn-react-chapter-8-react-forms-f3137a5c07c7

Expected result

• Read this tutorial chapter
• follow code steps
• move your code to this repository(at least one commit per day)
• explain to me, what did you learn from it in a few sentences(not less than 5)
• pass the test section
• after reviewing your progress and closing this issue - you can move to the next chapter.

Test

• right now form looks very simple.
  And usually Meal form have more fields. So let's add them.

By using this database schema: https://github.com/ChickenKyiv/recipe-api-only/blob/master/Recipe-ChickenKyiv-Release%231%20Schema%20%20%20SqlDBM.png
We'll advance this form. I'm pretty sure that when you'll add all fields in this form, you'll realize that it's better to create a sub-components for each form field.
So, Meal is a similar Model to Recipe.
so we'll add all important things to that form.

• Each recipe has attributes: diets, allergies, etc. - text field for each one
• Each recipe has a weekday field(like today i have chicken, tomorrow i'll eat soup) - i assume it'll be checkbox.
• Nutritions is a sub-array with a few fields() - text fields
• Ingredients is a sub-array with a few ingredients inside(like chichen brests, salt, pepper, etc.) Let's have 4 ingredients per meal.

And, make it works :) this is when a real ES6 is coming into the scene.
and don't forget that each field will also have an id field(later it can be useful, when you'll grab data from database)

#1

[atherdon]

For me personally, this is a most important chapter of this course, because it really starting to intersect with our main project...

[atherdon]

Btw, i think knowledge, that you gain in graphQL part about database schemes that we have will help you a bit here.

[sanchit94]

@atherdon Link to database schema has expired.

[atherdon]

Yeah, I've made big changes at the documentation, since i post this task.
Please take a look here: https://chickenkyiv.gitbook.io/documentation/database-schemes/chickenkyiv-schema

[sanchit94]

Thanks @atherdon But what do you think about #8?

[atherdon]

replied, thank you for helping me. a bit overwhelmed right now and can miss something

[sanchit94]

Hehe... I can understand as you have a lot of things to manage yourself.

[atherdon]

[sanchit94]

@atherdon Something wrong with the link you gave. It's not showing the image. Yesterday it was showing. Please check, or is this glitch just in my system?

[atherdon]

No it's me :) i'm always trying to rearrange and update things. I just moved pictures into separated folder :)

[atherdon]

fixed

[sanchit94]

Okay what do you suggest we stick to modals, or create a new page for adding meals? I feel just one modal is too much data at one place so it can be something like a wizard. Please suggest @atherdon

[atherdon]

i'm ok with modals, but separated page is more what i'll adore. main idea is to re-use your code later, so you like building a set of components that we'll export and then import as separated module into other projects

[sanchit94]

Alright! I too like the idea of creating a separate page for now and having modularised code because later we can do whatever we want with it! :)

[atherdon]

yeah - that's a plan. Btw, feel free if you have questions - maybe i can help you with this chapter

[sanchit94]

Well, I had a gazillion questions when I first looked at this, so my plan is -> Write code and push it -> Then we can make specific changes, and any of my question can be better addressed!

[atherdon]

ok, will wait for your commits

[sanchit94]

Just this question is coming to my mind, in Ingredients.js, I declare multiVal in the starting to capture data for the state variable multivalue and transfer it to parent MealPlan.js using multiVal variable. Is there a better way to do this, I used this approach just to make it work and it is 0% elegant. I cannot do event.target.value in handleIngredients() because that won't work.

[atherdon]

so if i understand you correctly - you want to pass value from child to parent component?

[sanchit94]

Yes exactly!

[atherdon]

and this is related to form elements, i assume. you can read about refs option: https://reactjs.org/docs/refs-and-the-dom.html or if it works now - it's ok to keep it not elegant for now. You can create a separated issue and explain what can be improved in future. because i plan to use some additional component for forms, and i think they solve that problem. so maybe keep it as it for now, and later- when we'll switch to a custom form component - we'll avoid this issue.

[sanchit94]

Great, so I won't worry about this for now and focus on this issue!! Thanks :)

[atherdon]

yeah, i find that great plugin while working on recipe search form. and it really gamechanger. if you want - i can share it with you, so you'll be able to take a quick look?

[sanchit94]

Sure, please provide me a link to that @atherdon

[atherdon]

check it github.com/final-form/final-form#-final-form

[sanchit94]

Looks pretty cool. So when do you suggest we include this in our project?

[atherdon]

if you want - you can create a separate component and create a meal form by using it. i didn't use it yet, but if oyu'll learn how to do it - then you'll be able to help us with search form too!

[sanchit94]

Well, currently I'm working on adding all the additional fields according on the database schema on the meal and that is almost done. I'll push it and once that is finalised somehow then I'll use this to create form for Recipy!

[atherdon]

good! i like your progress. really want to start to use your code in our main projects