React JS on submit remove input fields and display "Thank You" only

user_14878550 0
Viewed 701

My code has got 3 input fields i.e first name, last name, email and 1 useState to hold its value, I want to remove the div part containing all the input fields after i hit Sign up and display only Thank You

My code has got 3 input fields i.e first name, last name, email and 1 useState to hold its value, I want to remove the div part containing all the input fields after i hit Sign up and display only Thank You

Before signing up enter image description here

AFter signing up enter image description here

const Home = () => {
  const [saveInput, setInput] = useState({
    fname: '',
    lname: '',
    email: '',
  });
  const [message, setMessage] = useState('enter email');

  const inputFields = (event) => {
    const { value, name } = event.target;
    setInput((preValue) => ({
      ...preValue,
      [name]: value,
    }));
  };

  const onSubmits = (event) => {
    setMessage('thanks');
  };
  return (
    <div className="homeMain">
      <div className="row">
        <img
          className="home_img"
          src="https://i.pinimg.com/originals/53/b5/d7/53b5d70023efa05ec6797b25df413b73.jpg"
        />
        <h1 className="home_h1 text-center">Maryam's Restaurant</h1>
        <Link
          style={{
            color: 'white',
            textDecoration: 'inherit',
            textAlign: 'center',
          }}
          to="/Restaurant"
          className="home_button"
        >
          View Menu
        </Link>
        <h2 className="home_h2 text-center">
          Binging with Babish is a cooking show dedicated to discovering what
          the delectable (and occasionally horrible) foods from fiction actually
          taste like.
        </h2>

        {receipeList.map((curElem) => (
          <div className="home2Main">
            <img className="home_img2" src={curElem.img} />
            <p className="home2Mainp1">{curElem.h1}</p>
            <p className="home2Mainp2">{curElem.date}</p>
          </div>
        ))}
      </div>

      <homeMainDetails />
      <div className="home4Main">
        <h4>
          <bold>Subscribe</bold>
          <br />
          <small>
            Sign up with your email address to receive news and updates.
          </small>
        </h4>
        <input
          className="home4MainInput"
          name="fname"
          onChange={inputFields}
          value={saveInput.fname}
          type="text"
          placeholder="First Name"
        />
        <input
          className="home4MainInput"
          name="lname"
          onChange={inputFields}
          value={saveInput.lname}
          type="text"
          placeholder="Last Name"
        />
        <input
          className="home4MainInput"
          name="email"
          onChange={inputFields}
          value={saveInput.email}
          type="text"
          placeholder="Email Address"
        />
        <button onClick={onSubmits}>Sign Up</button>
        <h4 className="home4Mainh4">
          <small>{message}</small>
        </h4>
      </div>
    </div>
  );
};
export default Home;
reactjs css javascript
3 Answers

You can do it with a basic condition message !== "Thank you" like this:

<div className="home4Main">
  {message !== "Thank you" && (
    <>
      <h4>
        <bold>Subscribe</bold>
        <br />
        <small>Sign up with your email address to receive news and updates.</small>
      </h4>
      <input
        className="home4MainInput"
        name="fname"
        onChange={inputFields}
        value={saveInput.fname}
        type="text"
        placeholder="First Name"
      />
      <input
        className="home4MainInput"
        name="lname"
        onChange={inputFields}
        value={saveInput.lname}
        type="text"
        placeholder="Last Name"
      />
      <input
        className="home4MainInput"
        name="email"
        onChange={inputFields}
        value={saveInput.email}
        type="text"
        placeholder="Email Address"
      />
      <button onClick={onSubmits}>Sign Up</button>
    </>
  )}

  <h4 className="home4Mainh4">
    <small>{message}</small>
  </h4>
</div>

And update message

  const onSubmits = (event) => {
    setMessage('Thank you');
  };
user_61083900

You could use another state to indicate your submit state.

This way you can hold state value without affecting to the message state:

  • Use another state:
const [isSubmited, setIsSubmited] = useState(false);
  • Change that state when you submit:
const onSubmits = (event) => {
    setMessage('thanks');
    setIsSubmited(true);
  };
  • Then render it conditionally:
{isSubmited ? (
        <div className="home4Main">
          ...
        </div>
      ) : message}
user_51226150

Create a useState that contains the value on the state of the form.

const [isSubmited, setIsSubmited] = useState(false);

Then use this value in the JSX to conditional render the elements you want to display.

isSubmitted ? <div> Thank You! </div> : <div> your form.... </div>

You can call setIsSubmited(true) when you submit the form.

user_168771780
Related