Space - Lak

[easternwashingaden]

Assignment Submission: Exquisite React

Congratulations! You're submitting your assignment. Please reflect on the assignment with these questions.

Reflection

Prompt	Response
Define in your own words: What does "state" in React mean? How do we use it?	State means when there is an event occurred, the state gets changed which causes the re-rendering. We pass the state from a Child component to the parent component through a callback function. When there is an event occurred, there will be an event listener that will trigger the event handler function, then the event handler function will call a callback function that is given to the Child component from the Parent component through props. The callback function then will do something that causes a state change, and finally it will cause a re-rendering.
Describe the relationships between the components on a high-level: which components were siblings? Which components were nested within each other?	The relationships between the components depend on the App structure design/ layout. One component might be responsible to pass information to other components (child) through props, so the child components will decide what to do with those information. The child component can also pass the events/states back to the parent component when there is an event occurred through the callback function. RecentSubmission, PlayerSubmissionForm, and FinalPoem are siblings components. Game component is nested within the App component where RecentSubmission, PlayerSubmissionForm, and FinalPoem components are nested within the Game component.
How did this project differ from in-class examples?	The main differences of this project from the class-examples are the component relationships. In this project, we have sibling components. When there is an event happened in a Child component(PlayerSubmissionForm), the child component passes the state through the callback function, then the callback function causes the state change, the parent uses that update information and passes it to another child component. In short, in the project, when there is an event occurred from on one child component, it will cause another sibling to change the display. The parent component plays an important role to receive the information from one Child and pass the updated information to another child. We also learned to hide some components when a certain event occurs.
How was this project similar to in-class examples?	The similarities: The way the props are passed from the parent component to their child components. When there is a certain event occurred on the child component, the parent will know it through the callback function. The callback function causes the state changed and finally causes re-rendering.