Props and State

Forms and Inputs

React form elements maintain internal state. Think of React inputs as stateful child components. This means that we must manage the state of inputs through our own stateful component and one way data binding. The creation of a parent component (which we’ll refer to as form-container), manages the state for all child components of the form and passes any necessary state down into it’s inputs through the use of props. Each input has an onChange event that we can handle and use to update our form-container’s state each time the user interacts with an input.

Props

Components accept arbitrary inputs called props. In JSX, props are passed into a component with a syntax that looks like HTML attributes. These are the equivalent of function params.

In actuality, props is the name of the object passed into a component constructor and any prop added to a component in the JSX will be accessible as a property on props.

After props is passed into the constructors super function, they are available on the context by using this.props.