React User Input u0026 Form Validation Quiz Quiz

1. Controlled vs Uncontrolled Components

   In React, what is the main characteristic of a controlled input component?

   1. Its value is controlled by React state.
   2. It uses the DOM to manage its value.
   3. It cannot be validated in real-time.
   4. It updates only on form submit.
   5. It stores the value in a class property.

2. Reading Input Values

   Which event would you typically use to read the current value of a text input in a React controlled component?

   1. onChange
   2. onClick
   3. onHover
   4. onBlur
   5. onInputted

3. Default Value Pitfall

   In the following code, what is the issue?nnu003Cinput value={username} /u003E

   1. It will crash if 'username' is undefined causing an uncontrolled to controlled warning.
   2. It creates an uncontrolled component.
   3. The input will be read-only with no way to change the value.
   4. It does not allow for number input.
   5. It will trigger a memory leak in the component.

4. Form Submission Handling

   What must you do to prevent a React form from causing a page reload when submitted?

   1. Call event.preventDefault() in the onSubmit handler.
   2. Set reload={false} in the u003Cformu003E element.
   3. Wrap the u003Cformu003E in a u003Cnosubmitu003E tag.
   4. Remove the type='submit' from all buttons.
   5. Use return false; at the end of your submit function.

5. Basic Field Validation

   What is a proper way to validate that an email field is not empty before submission in React?

   1. Check if the email state variable is not an empty string.
   2. Use window.prompt to get email input.
   3. Set the input's required attribute to true.
   4. Only use HTML5 validation and not check in code.
   5. Render the input as type='password' instead.

6. Error State Display

   How should you typically display error messages for invalid form input in React?

   1. Render error messages conditionally based on validation state.
   2. Use alert() every time an input is changed.
   3. Redirect the user away from the form.
   4. Display errors in the browser's title bar.
   5. Log errors to the console only.

7. Validation With useState

   In a functional React component, how could you best ensure validation errors disappear immediately when a user fixes their input?

   1. Update the error state on every onChange event.
   2. Run validation only on form submit.
   3. Use a setTimeout to delay error removal.
   4. Rerender the component using forceUpdate.
   5. Only show errors after 3 failed attempts.

8. HTML5 Attributes And React

   Which HTML attribute automatically provides client-side validation alongside React validation?

   1. required
   2. entry
   3. forceupdate
   4. skip
   5. readOnly

9. Handling Checkbox State

   When creating a controlled checkbox in React, which property should you use to link it to state?

   1. checked
   2. value
   3. selected
   4. default
   5. visible

10. Form Libraries in React

    Which library is specifically popular for advanced form management and validation in React?

    1. Formik
    2. Redux
    3. Lodash
    4. Jest
    5. DocumentJS