What type of form component is this, and how does the value of the input field behave? JavaScript function MyForm() { const [inputValue, setInputValue] = useState(""); const handleChange = (event) => { setInputValue(event.target.value); }; return ( <form> <input type="text" value={inputValue} onChange={handleChange} /> <p>Current Value: {inputValue}</p> </form> ); }

Controlled, value managed by React state

Uncontrolled, value managed by DOM

Controlled, value not changeable

What will happen when the handleSubmit function is called in the following code? JavaScript const [email, setEmail] = useState(""); const [error, setError] = useState(""); const handleSubmit = () => { if (!validateEmail(email)) { setError("Invalid email"); } };

An error message "Invalid email" will be displayed when the email is invalid.

The email will be automatically corrected to a valid format.

The error state will be cleared on each submit.

The validateEmail function will be called without any effect.

Tutorials
Courses
Go Premium

React Forms

Here we will cover the concepts of React Forms like form inputs, Validating form inputs and much more.

Last Updated :

Discuss

Comments

Question 1

What is the primary way to handle form inputs in React?

Using state to store input values
Directly manipulating DOM elements
Using class components only
Using global variables

Discuss it

Question 2

Which React hook is commonly used to handle form input values in functional components?

useState
useEffect
useReducer
useCallback

Discuss it

Question 3

Which method is used to update a form input value in React?

setState()
forceUpdate()
updateState()
render()

Discuss it

Question 4

What is the purpose of the onChange event in React forms?

To submit the form
To update the state with the current input value
To initialize the form
To clear the input value

Discuss it

Question 5

Which of the following is the correct way to bind a value to an input field in React?

<input value="name" />
<input defaultValue={name} />
<input value={name} onChange={handleChange} />
<input onChange={handleChange} />

Discuss it

Question 6

Is this an example of two-way binding in React?

JavaScript

<input value={inputValue} onChange={(e) => setInputValue(e.target.value)} />

Yes, it is two-way binding
No, it is one-way binding
No, it is not binding
No, setInputValue is incorrect

Discuss it

Question 7

What type of form component is this, and how does the value of the input field behave?

JavaScript

function MyForm() {
    const [inputValue, setInputValue] = useState("");

    const handleChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        <form>
            <input type="text" value={inputValue} onChange={handleChange} />
            <p>Current Value: {inputValue}</p>
        </form>
    );
}

Uncontrolled, value managed by DOM
Controlled, value managed by React state
Uncontrolled, no state
Controlled, value not changeable

Discuss it

Question 8

Is this the correct way to validate an email field in React?

JavaScript

const validateEmail = (email) => /\S+@\S+\.\S+/.test(email);

Yes, it's a correct validation function
No, the regular expression is incorrect
No, the function should return an error
No, it should use isValidEmail()

Discuss it

Question 9

What will happen when the handleSubmit function is called in the following code?

JavaScript

const [email, setEmail] = useState("");
const [error, setError] = useState("");

const handleSubmit = () => {
    if (!validateEmail(email)) {
        setError("Invalid email");
    }
};

An error message "Invalid email" will be displayed when the email is invalid.
The email will be automatically corrected to a valid format.
The error state will be cleared on each submit.
The validateEmail function will be called without any effect.

Discuss it

Question 10

What will happen when the user clicks the button in the following code?

JavaScript

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1);
    };

    return (
        <div>
            <h1>{count}</h1>
            <button onClick={increment}>Increment</button>
        </div>
    );
}

The count will increment by 1 each time the button is clicked.
The count will remain at 0 because the state isn't updating correctly.
The code will throw an error due to a missing dependency in useState()
The count will decrement by 1 each time the button is clicked.

Discuss it

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion