Input field loses focus after typing one character in react app

Question

In my case I have a dropdown and based on the number selected with the dropdown some input fields appear. When I type into the input field the focus on that input field is lost after typing one character. Setting a unique key for each field is not solving my problem.

Link to the project: https://codesandbox.io/s/stoic-brahmagupta-m5014

const ItemPrice = () => {
  const data = itemData.doReservation.eventPackage.item;

  let emptyCat = {};
  let emptyQnt = {};
  let promoNum = {};
  let emptyPromotion = {};

  const [promoNumber, setPromoNumber] = useState(promoNum);

  for (let it in data) {
    let cat = {};
    let promo = {};

    for (let bt in data[it].buyertypes) {
      cat[data[it].buyertypes[bt].id] = "";
      emptyQnt[data[it].buyertypes[bt].id] = 0;
      promo[data[it].buyertypes[bt].id] = "";
      promoNum[data[it].buyertypes[bt].id] = [];
      emptyPromotion[data[it].buyertypes[bt].id] = {};
    }
    emptyCat[data[it].id] = cat;
    cat = {};
  }

  const [quantity, setQuantity] = useState(emptyQnt);
  const [code, setCode] = useState(emptyPromotion);

  const handleQuantity = (e) => {
    const name = e.target.name;
    const value = e.target.value;
    setQuantity({
      ...quantity,
      [name]: value
    });
    let num = [];
    for (let i = 1; i <= value; i++) {
      num.push(i);
    }
    setPromoNumber({ ...promoNumber, [name]: num });
    let num2 = {};
    for (let pn = 1; pn <= value; pn++) {
      if (code[name]["code" + name + pn] === undefined) {
        num2["code" + name + pn] = "";
      } else {
        num2["code" + name + pn] = code[name]["code" + name + pn];
      }
    }
    setCode({ ...code, [name]: num2 });
  };

  const handleCode = (e) => {
    e.preventDefault();
    const sp = e.target.name.split(",");
    const id1 = sp[0];
    const id2 = sp[1];
    const value = e.target.value;
    setCode({
      ...code,
      [id1]: {
        ...code[id1],
        [id2]: value
      }
    });
  };

  const ShowData = () => {
    let buyerTypes = [];
    let items = [];
    if (data) {
      for (let it in data) {
        items.push(
          <div className="selectionHeader">
            <div className="selHeadType">type</div>
            <div className="selHeadQnt">Quantity</div>
            <div className="selHeadCat">Price category</div>
          </div>
        );
        for (let bt in data[it].buyertypes) {
          buyerTypes.push({
            dsc: data[it].buyertypes[bt].description,
            qntId: data[it].buyertypes[bt].id
          });
        }
        items.push(
          <div>
            {buyerTypes.map((i, index) => (
              <div key={`a${index}`} className="selectionRowComp">
                <div key={`c${index}`} className="selectionRow">
                  <h4 className="btDescription">{i.dsc}</h4>
                  <div className="NumberDropDown">
                    <select
                      value={quantity[i.qntId]}
                      onChange={handleQuantity}
                      name={i.qntId}
                    >
                      {[0, 1, 2, 3, 4, 5, 6].map((l) => {
                        return (
                          <option value={l} key={l}>
                            {l}
                          </option>
                        );
                      })}
                    </select>
                  </div>
                </div>
                <div>
                  {promoNumber[i.qntId].map((p, index) => (
                    <div key={`s${index}`}>
                      <label className="codeLabel">code {p}: </label>
                      <input
                        className="codeInput"
                        type="text"
                        value={code[i.qntId]["code" + i.qntId + (index + 1)]}
                        onChange={handleCode}
                        name={[i.qntId, "code" + i.qntId + (index + 1)]}
                        // required={hasPromotion[i.qntId]}
                      />
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        );
        buyerTypes = [];
      }
    }
    return (
      <div className="selectionItem">
        {items.map((it, index) => {
          return <div key={`w${index}`}> {it}</div>;
        })}
      </div>
    );
  };

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

  return (
    <div>
      <div>
        <div>
          <form onSubmit={handleSubmit}>
            <ShowData />
          </form>
        </div>
      </div>
    </div>
  );
};

Answer 1

You have to decouple Parent ( ItemPrice ) and Child ( ShowData ) components respectively.

A through re-factor of your code is needed. Because dependencies like const data is defined in ItemPrise and used in child component ShowData , rather it should be sent down as Props to ShowData component.

ShowData component should not be directly dependent on any variable/const defined in ItemPrise component. All such dependencies should be passed using any of the following basis your use-case and application requirements:

1. Props
2. Context
3. Global state management such as Redux
4. Custom Hook