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

|

23 Discussions

|

  • fernandoituarte1
     + 0 comments
      const handleSubmit = (e) => {
    e.preventDefault();

    const form = formRef.current
    const data = {
      name: form.name.value,
      email: form.email.value,
      message: form.message.value
    }

    for(const key in data) {
      if(data[key] === "") {
        setError("All fields are required.")
        return
      }
    }

    setSubmittedData(data);
    form.reset();
  };

  • ngakanbagus15
     + 0 comments

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

    import "h8k-components";

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

    const handleSubmit = (e) => { e.preventDefault(); //Mencegah page refresh

    if(!name || !email || !message){
  setError("All fields are required.")
  setSubmittedData(null)
} // Mengecek apakah ada page kosong atau tidak, jika iya maka tampilkan error
else{
  setSubmittedData({name, email, message}) // Simpan data yang diinput
  setName("") // Clear form
  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;

  • achennakeshavar1
     + 0 comments

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

    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;

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