I have a form created using array map method. I want to only add one div of either box-one or box-two while onClick add but now it adds both divs. .......................................................................................................................How to only create single div on this react form

  const [inputList, setInputList] = useState([{ Date: "", File: "" }]);

// handle input change
const handleInputChange = (e, index) => {
  const { name, value } = e.target;
  const list = [...inputList];
  list[index][name] = value;
  setInputList(list);
};

// handle click event of the Remove button
const handleRemoveClick = index => {
  const list = [...inputList];
  list.splice(index, 1);
  setInputList(list);
};

// handle click event of the Add button
const handleAddClick = () => {
  setInputList([...inputList, { Date: "",File: "" }]);
};
<form >
  
        {inputList.map((x, i) => {
      return (
          <>
        <div className="box-one">
          <input
            name="firstName"
            placeholder="Enter First Name"
            type="date"
            value={x.firstName}
            onChange={e => handleInputChange(e, i)}
          />
          <input
            className="ml10"
            name="lastName"
            placeholder="Enter Last Name"
            type="file"
            value={x.lastName}
            onChange={e => handleInputChange(e, i)}
          />
          {/* <div className="btn-box">
            {inputList.length !== 1 && <button
              className="mr10"
              onClick={() => handleRemoveClick(i)}>Remove</button>}
            {inputList.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
          </div> */}
        </div>
        <div className="box-two">
        <input
          name="firstName"
          placeholder="Enter First Name"
          type="date"
          value={x.firstName}
          onChange={e => handleInputChange(e, i)}
        />
        <input
          className="ml10"
          name="lastName"
          placeholder="Enter Last Name"
          type="file"
          value={x.lastName}
          onChange={e => handleInputChange(e, i)}
        />
        <div className="btn-box">
          {inputList.length !== 1 && <button
            className="mr10"
            onClick={() => handleRemoveClick(i)}>Remove</button>}
          {inputList.length - 1 === i && <button onClick={handleAddClick}>Add</button>}
        </div>
      </div>
      </>
      );
    })}
        </form>

CodePudding user response：

Try this

const [inputList, setInputList] = useState([
    { Date: "", File: "" },
    { Date: "", File: "" },
  ]);

  // handle input change
  const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };

  // handle click event of the Remove button
  const handleRemoveClick = (index) => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
  };

  // handle click event of the Add button
  const handleAddClick = () => {
    setInputList([...inputList, { Date: "", File: "" }]);
  };
  return (
    <form>
      <>
        {inputList.map((x, i) => {
          return (
            <>
              <div className="box-one">
                <input
                  name="firstName"
                  placeholder="Enter First Name"
                  type="date"
                  value={x.firstName}
                  onChange={(e) => handleInputChange(e, i)}
                />
                <input
                  className="ml10"
                  name="lastName"
                  placeholder="Enter Last Name"
                  type="file"
                  value={x.lastName}
                  onChange={(e) => handleInputChange(e, i)}
                />
              </div>
              <div className="btn-box">
                {inputList.length !== 1 && (
                  <button className="mr10" onClick={() => handleRemoveClick(i)}>
                    Remove
                  </button>
                )}
                {inputList.length - 1 === i && (
                  <button onClick={handleAddClick}>Add</button>
                )}
              </div>
            </>
          );
        })}
      </>
    </form>
  );

CodePudding user response：

Based on your return logic, each item of the inputList will render two divs (Both box-one and box-two). if you want to add only one input after clicking "Add", you can remove one of the boxes.