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

|

20 Discussions

|

  • crystalreed061
     + 0 comments

    React is such a powerful and flexible JavaScript library for building user interfaces! cricket betting exchange

  • prajwallokhande3
     + 0 comments

    Best 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();
    const isValid = name.trim()!=="" && email.trim()!=="" && message.trim()!=="";
    
    isValid?setSubmittedData({name,email,message}):setError("All fields are required.");

    isValid?setError(""):setSubmittedData(null);

    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;

  • ashvinisharma192
     + 0 comments

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

    }

  • nikoladjekic_dev
     + 0 comments

    I don't believe this... I constantly kept failing the first test -> "displays error message when fields are empty and submit is clicked", and couldn't figure out what is wrong... in the end, I found the problem, and it seems I copied the error message without the dot (.) at the end, and that was causing the test to fail... aaggghhh

  • 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;