Are you ready?
6 questions to solve
Instructions
- This quiz goes to full-screen once you press the Start button.
- At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
What happens when the form shown below is submitted by clicking on the given button?
function App() {
function handleSubmit(e) {
e.preventDefault();
alert('Form submitted');
}
return (
<form onsubmit={handleSubmit}>
<input type="text"/>
<button>Submit</button>
</form>
);
}Note: There's no typo in the code.
Since it's clearly stated that there's no typo in the code above, the
onsubmit prop set on the <form> element doesn't have any effect, for the correct prop is called onSubmit. Hence, upon clicking on the button, the form gets submitted. This goes with choice (D). For more info, refer to React Forms — Basics.What is the problem in the following code, from the perspective of React?
function handleSubmit(e) {
e.preventDefault();
alert('Form submitted');
}
function App() {
return (
<form onSubmit={handleSubmit}>
<input type="text"/>
<button>Submit</button>
</form>
);
}Precisely, from the perspective of JavaScript, there's absolutely no problem — the event handler is defined outside the
App() function while it itself doesn't refer to any free variables. However, in React, it's desirable to have all the event handlers associated with a component's children inside the component function. This means that in the code above, handleSubmit() should ideally be inside App(). Likewise, the correct choice is (D). For more info, refer to React Forms — Basics.Setting the
value prop on a form input element makes it a controlled component. True or false?True. When React sees the
value prop on a form input element, it treats the element as a controlled component. For more info, refer to React Forms — Basics: Controlled components.Let's suppose we have a controlled text input component that updates its value as we type into it. Which of the following would be required by the component?
Three things are needed: a state value (maintained by the parent of
<input> or possibly somewhere else in the entire app); a value prop on the <input>; and an event handler prop on the <input> as well. Hence, the correct choices are (A), (C), and (D). For more info, refer to React Forms — Basics: Controlled components.In a form, an
<input> element can be uncontrolled even with the value prop set on it. True or false?False. Once an
<input> element, or just about any form input (e.g. <select>, <textarea>, etc.), has value set on it, it can NOT become an uncontrolled component. For more info, refer to React Forms — Basics: Uncontrolled components.Consider the following code:
function App() {
function handleSubmit(e) {
e.preventDefault();
// What can we do here?
}
return (
<form onSubmit={handleSubmit}>
<input type="text" name="firstName" />
<input type="text" name="lastName" />
<button>Submit</button>
</form>
);
}How can we obtain the value of both the input fields inside the
handleSubmit() function, supposing that we can't add a value prop to them?All three of the given options can be used, given that we can't add a
value prop to the <input> elements. For more info, refer to React Forms — Basics: Retrieving form data upon submission.
