We use cookies to ensure you have the best browsing experience on our website. Please read our cookie policy for more information about how we use cookies.
  1. Prepare
  2. React
  3. Forms
  4. Contact Form
  5. Discussions

Contact Form

Sort by

recency

|

16 Discussions

|

  • 36_akashroy
     + 0 comments

    Solution:

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

    if (!name || !email || !message) {
      setError("All fields are required.");
      setSubmittedData(null);
    } else {
      setSubmittedData({ name, email, message });
      setName("");
      setEmail("");
      setMessage("");
    }
  };

  return (
    <>
      <h8k-navbar header="Contact Form"></h8k-navbar>
      <div className="App">
        <h1>Contact Form</h1>
        <form onSubmit={handleSubmit}>
          <input
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="Name"
            data-testid="name-input"
          />
          <input
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Email"
            data-testid="email-input"
          />
          <textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            placeholder="Message"
            data-testid="message-input"
          />
          <button type="submit" data-testid="submit-button">
            Submit
          </button>
        </form>
        {error && (
          <p data-testid="error-message" className="error">
            {error}
          </p>
        )}
        {submittedData && (
          <div data-testid="submitted-data" className="submitted-data">
            <h2>Submitted Information</h2>
            <p>
              <strong>Name:</strong> {submittedData.name}
            </p>
            <p>
              <strong>Email:</strong> {submittedData.email}
            </p>
            <p>
              <strong>Message:</strong> {submittedData.message}
            </p>
          </div>
        )}
      </div>
    </>
  );
}

export default App;

  • princethakurame1
     + 0 comments

    why my test is failing

    const handleSubmit = (e) => { e.preventDefault(); if (!name || !message || !email) { setError("All fields are required") return } setSubmittedData({name,email,message}) setEmail("") setMessage("") setName("") setError("") };

  • gogul_vijay_v
     + 0 comments

    const handleSubmit = (e) => { e.preventDefault();

    // Validate that none of the fields are empty if (!name.trim() || !email.trim() || !message.trim()) { setError("All fields are required."); setSubmittedData(null); // Clear submitted data if validation fails } else { setError(""); // Clear any existing errors setSubmittedData({ name, email, message });

    // Clear input fields after successful submission
setName("");
setEmail("");
setMessage("");

    } };

  • opal22fauzian
     + 1 comment
    const handleSubmit = (e) => {
e.preventDefault(); 

if ( !name || !email || !message ){

        setError( 'All fields are required.' );
        setSubmittedData('');

} else {

    // 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

    setError('');
setSubmittedData({ name, email, message });
setName('');
setEmail('');
setMessage('');
}

    };

  • shamithnakka
     + 1 comment

    Here's my approach...

    const handleSubmit = (e) => {
  e.preventDefault();

  setError("");
  setName("");
  setEmail("");
  setMessage("");
  setSubmittedData(null);

  if(!name || !email || !message) {
    setError("All fields are required.");
    return;
  }

  setSubmittedData({ name, email, message });
};

    Let me know what you think...