Reading-Notes

Reading Notes

React Docs - Forms

What is a ‘Controlled Component’?

A controlled component is a component that renders form elements and controls them by keeping the form data in the component’s state.

In a controlled component, the form element’s data is handled by the React component (not DOM) and kept in the component’s state. A controlled component basically overrides the default behavior of the HTML form elements.

We create a controlled component by connecting the form element (<input>, <textarea> or <select>) to the state by setting its attribute value and the event onChange.

https://stackoverflow.com/questions/42522515/what-are-react-controlled-components-and-uncontrolled-components#:~:text=A%20controlled%20component%20is%20a,kept%20in%20the%20component’s%20state.

Should we wait to store the users responses from the form into state when they submit the form OR should we update the state with their responses as soon as they enter them? Why.

Since the handleChange runs on every keystroke to update the React state, the displayed value will update as the user types.

How do we target what the user is entering if we have an event handler on an input field?

this.state.value

The Conditional (Ternary) Operator Explained

Why would we use a ternary operator?

It is just as effective while beng more efficient to type out.

Rewrite the following statement using a ternary statement:

if(x===y){

console.log(true);

} else {

console.log(false);

}

((x===y) ? ‘true’ : ‘false’;)

This site is open source. Improve this page.