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 value of the input field is controlled by React state, and any changes to the input update the state, making the React state the “single source of truth” for the form data.
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. We should update the state with their responses as soon as they enter them. This approach ensures that the component’s state is always up-to-date with the user’s input and allows for more interactive features such as input validation, instant feedback, and enabling or disabling form submission buttons based on the form’s current values.
How do we target what the user is entering if we have an event handler on an input field?
We can target what the user is entering by using the event.target.value property within the event handler function. This property gives us access to the current value of the input field that triggered the event.
Why would we use a ternary operator?
The ternary operator is used for conditional rendering in JSX. It allows us to render different elements or components based on a condition in a concise and readable way. It is especially useful in React for inline conditional expressions without the need for verbose if-else statements.
Rewrite the following statement using a ternary statement:
```jsx if(x === y){ console.log(true); } else { console.log(false); }
console.log(x === y ? true : false); or console.log(x === y);