Dev.to

Coding Challenge Practice - Question 3

Today's question Create a simple React application called "Contact Form" that collects user information and displays it below upon submission. Solution In solving this problem, the first step is to check the boilerplate provided: import { useState } from "react"; import "./App.css"; import "h8k-components"; function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [message, setMessage] = useState(""); const [submittedData, setSubmittedData] = useState(null); const [error, setError] = useState(""); const handleSubmit = (e) => { e.preventDefault(); // TODO: Add logic to validate inputs and display submitted data // HINT: You can use the setError function // HINT: You can use the setSubmittedData function as below // setSubmittedData({ name, email, message }); }; return ( Contact Form setName(e.target.value)} placeholder="Name" data-testid="name-input" /> setEmail(e.target.value)} placeholder="Email" data-testid="email-input" /> setMessage(e.target.value)} placeholder="Message" data-testid="message-input" /> Submit {error && ( {error} )} {submittedData && ( Submitted Information Name: {submittedData.name} Email: {submittedData.email} Message: {submittedData.message} )} ); } export default App; The boilerplate code provides us with 3 input fields(name, email, message) and the state variables that will be used to manage them. It also provides the UI that would display the submitted values for each of the inputs. The state logic to display the UI when the form is submitted is also provided; all we have to do is remove the comment sign (//) and set the input fields to empty after displaying the submitted values. // HINT: You can use the setSubmittedData function as below setSubmittedData({ name, email, message }); setName(""); setEmail(""); setMessage(""); }; The next step is to ensure that if any of the 3 input fields are empty, the error message "All fields are required" should be displayed. if(!name || !email || !message) { setError("All fields are required"); return; } setError(""); The logic ensures that the error message should be displayed if the variables name, email, and message return a falsy value. That's all there is to this task. The final code: import { useState } from "react"; import "./App.css"; import "h8k-components"; function App() { const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [message, setMessage] = useState(""); const [submittedData, setSubmittedData] = useState(null); const [error, setError] = useState(""); const handleSubmit = (e) => { e.preventDefault(); // TODO: Add logic to validate inputs and display submitted data // HINT: You can use the setError function if(!name || !email || !message) { setError("All fields are required"); return; } setError("") // HINT: You can use the setSubmittedData function as below setSubmittedData({ name, email, message }); setName(""); setEmail(""); setMessage(""); }; return ( Contact Form setName(e.target.value)} placeholder="Name" data-testid="name-input" /> setEmail(e.target.value)} placeholder="Email" data-testid="email-input" /> setMessage(e.target.value)} placeholder="Message" data-testid="message-input" /> Submit {error && ( {error} )} {submittedData && ( Submitted Information Name: {submittedData.name} Email: {submittedData.email} Message: {submittedData.message} )} ); } export default App; That's all folks!

May 7, 2025 - 00:29
 0
Coding Challenge Practice - Question 3

Today's question

Create a simple React application called "Contact Form" that collects user information and displays it below upon submission.

Solution

In solving this problem, the first step is to check the boilerplate provided:

import { useState } from "react";
import "./App.css";

import "h8k-components";

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [submittedData, setSubmittedData] = useState(null);
  const [error, setError] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    // TODO: Add logic to validate inputs and display submitted data
    // HINT: You can use the setError function

    // HINT: You can use the setSubmittedData function as below
    // setSubmittedData({ name, email, message });
  };

  return (
    <>
      
      

        
Contact Form

        

           setName(e.target.value)}
            placeholder="Name"
            data-testid="name-input"
          />
           setEmail(e.target.value)}
            placeholder="Email"
            data-testid="email-input"
          />