Master React, Quick Code tutorial. Part 7

[atherdon]

https://medium.com/quick-code/lets-learn-react-chapter-7-component-life-cycle-6aaa815747db

Expected result

• [x] Read this tutorial chapter
• [x] follow code steps
• [x] move your code to this repository(at least one commit per day)
• [x] 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

• [ ] by using componentWillMount add few recipes/meals. each item should have recipe_url, image, ingredient list(sub-array), directions(sub-array), description(string)

  1

[chefigueroa-rodriguez]

Learned about the component life cycle, which are a series of actions which are executed:

1. before component is displayed - componentWillMount()
2. after component is displayed - componentDidMount()
3. before component is updated - usecomponentWillUpdate()
4. and after component is updated - componentDidUpdate()

Also learned how to dynamically render a message when the state is updated. By modifying our state:

state = { meal: '', meals: [], showAddMealMessage: false };

Adding our componentDidUpdate() function:

componentDidUpdate(prevProps, prevState) { if (prevState.meals.length < this.state.meals.length) { this.setState({showAddMealMessage: true}); setTimeout(() => this.setState({showAddMealMessage: false}), 1000); } }

And adding this line of code when we render:

{this.state.showAddMealMessage ?

New meal added

: null}

[atherdon]

assume you have a profile form, with default fields like email, username, image, description, etc. imagine how you'll create it and tell me how you'll handle a default form flow like updates, validation, etc. based on what you learn at this chapter.

[atherdon]

if you'll reply to my last comment, i think we can close this task and move to most interesting part of this course. Chapter 8 is really important for me, because it's introduce you to my projects, that we're currently working on