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.

Earn Google Badge

Full Stack Dev CourseExplore

React Forms

Last Updated :

Discuss

Comments

Question 1

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

A
Using state to store input values
B
Directly manipulating DOM elements
C
Using class components only
D
Using global variables

Question 2

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

A
useState
B
useEffect
C
useReducer
D
useCallback

Question 3

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

A
setState()
B
forceUpdate()
C
updateState()
D
render()

Question 4

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

A
To submit the form
B
To update the state with the current input value
C
To initialize the form
D
To clear the input value

Question 5

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

A
<input value="name" />
B
<input defaultValue={name} />
C
<input value={name} onChange={handleChange} />
D
<input onChange={handleChange} />

Question 6

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

JavaScript

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

A
Yes, it is two-way binding
B
No, it is one-way binding
C
No, it is not binding
D
No, setInputValue is incorrect

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>
    );
}

A
Uncontrolled, value managed by DOM
B
Controlled, value managed by React state
C
Uncontrolled, no state
D
Controlled, value not changeable

Question 8

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

JavaScript

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

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

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");
    }
};

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

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>
    );
}

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

Tags:

Web Technologies

ReactJS

React Quiz

There are 10 questions to complete.

Take a part in the ongoing discussion