Conditional form input non-responsive-CodePudding

As part of login, I have a conditional input which is unresponsive; I can focus on it but I can only write to it little very fast after clicking but the value is cleared. I also tried adding around it with no luck. All non-conditional inputs function normally.

https://codesandbox.io/s/frosty-wu-y5do4c

import React, { useState } from "react";

const EventSignUp = (props) => {
  let [email, setEmail] = useState("");
  let [name, setName] = useState("");
  let [zip, setZip] = useState("");

  let [agreeTerms, setAgreeTerms] = useState(false);
  let [rememberMe, setRememberMe] = useState(false);
  let [country, setCountry] = useState("");

  const InputCountry = () => {
    return (
      <div>
        <input
          placeholder="Country"
          type="country"
          name="country"
          onChange={(e) => setCountry(e.target.value)}
        />
      </div>
    );
  };

  return (
    <form id="form_login_email" method="post">
      <input
        placeholder="Name*"
        type="name"
        name="name"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="E-mail*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="E-mail again*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="Zip/Postal Code"
        type="zip"
        name="zip"
        onChange={(e) => setZip(e.target.value)}
      />
      <InputCountry />
    </form>
  );
};

export default EventSignUp;

CodePudding user response：

Move InputCountry outside the EventSignup component, because everytime a value was entered inside country input, it was resulting in re-rendering and recreation of the component. Also, added a value prop on country input to make it controlled input.


import React, { useState } from "react";

const InputCountry = ({ country, setCountry }) => {
  return (
    <div>
      <input
        placeholder="Country"
        type="country"
        name="country"
        value={country}
        onChange={(e) => setCountry(e.target.value)}
      />
    </div>
  );
};

const EventSignUp = (props) => {
  let [email, setEmail] = useState("");
  let [name, setName] = useState("");
  let [zip, setZip] = useState("");

  let [agreeTerms, setAgreeTerms] = useState(false);
  let [rememberMe, setRememberMe] = useState(false);
  let [country, setCountry] = useState("");

  return (
    <form id="form_login_email" method="post">
      <input
        placeholder="Name*"
        type="name"
        name="name"
        onChange={(e) => setName(e.target.value)}
      />
      <input
        placeholder="E-mail*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="E-mail again*"
        type="email"
        name="email"
        onChange={(e) => setEmail(e.target.value)}
      />
      <input
        placeholder="Zip/Postal Code"
        type="zip"
        name="zip"
        onChange={(e) => setZip(e.target.value)}
      />
      <InputCountry country={country} setCountry={setCountry} />
    </form>
  );
};

export default EventSignUp;