Fullstack React - Chapter 6 Notes

Summary

This post contains notes from chapter 6 in Fullstack React - "Forms". The purpose of this chapter is to learn how to work with Forms in React.

Overview 

Up 

Forms
Show an example of defining a form in React.

INSERT CODE SAMPLE HERE

Controlled versus Uncontrolled Components
Controlled components are components whose value is tied to state. When accessing the values of the component, we are able to pull the value from state because they are linked. An uncontrolled component is not linked to state and when accessing the value of an uncontrolled component, we need use this.refs.name.value. Controlled components are the preferred method and uncontrolled components were only discussed to let us know they exist.

To convert an uncontrolled component to a controlled compontent, we must do the following:

• Create a place in state to store its value
• Set the value prop on the component to the value in state
• Add an onChange handler that will update its value in state

INSERT CODE SAMPLE HERE

General Notes

• Use evt.preventDefault() in onSubmit event handlers to prevent the browser's default action of submitting the form