动态添加和删除输入并更新嵌套数组

Question

How to add new input fields dynamically to object in nested array in react js when user clicks on plus sign? dynamically add and remove inputs

I want to add and delete propositionTimes dynamically in the handlepropositionTimeAddClick and handlepropositionTimeRemoveClick methods I shared below. How can I do that? And I want to do the same with propositionResponseTimes and analyzers.

const [issue, setIssue] = useState({
    
    firstResponseDuration: "",
    firstResponseOvertime: "",
    solutionDuration: "",
    solutionOvertime: "",
    propositionTimes: [{
     
      propositionTime: ""
    }],
    propositionResponseTimes: [{  propositionResponseTime: "" }],
    analyzers: [{  analyzerName: "", analyzerHuaweiId: "" }],
  });

  const { firstResponseDuration, firstResponseOvertime,solutionDuration, solutionOvertime, propositionTimes, propositionResponseTimes, analyzers } = issue;
.
.
.

 // handle click event of the Remove button
  const handlepropositionTimeRemoveClick = index => {
  
  };

  // handle click event of the Add button
  const handlepropositionTimeAddClick = (i) => {
   
  };
.
.
.
   {
            issue.propositionTimes.map((item, i) => {
              return (
                <div key={i} className="form-group" >
                  <label>
                    Proposition Time
                  </label>
                  <TextField
                    type="datetime-local"
                    placeholder="Enter propositionTime"
                    name="propositionTime"
                    format="dd-MM-yyyy HH:mm"
                    value={item.propositionTime}
                    onChange={e => onInputPropositionTimes(e, i)}
                  />

                  <div>
                    {issue.propositionTimes.length !== 1 && <button
                      className="mr10"
                      onClick={() => handlepropositionTimeRemoveClick(i)}>Remove</button>}
                    {issue.propositionTimes.length - 1 === i && <button onClick={handlepropositionTimeAddClick(i)}>Add</button>}
                  </div>


                </div>
              )
            })
          }

Answer 1

  // handle click event of the Remove button
  const handlepropositionTimeRemoveClick = index => {
    const issueObj = {...issue};
    const filteredIssue = issue.propositionTimes.filter((item, ind) => ind !== index);
    issueObj.propositionTimes = filteredIssue;
    setIssue(issueObj);
  };

  // handle click event of the Add button
  const handlepropositionTimeAddClick = (i) => {
    const issueObj = {...issue};    
    const newObj = {
      propositionTime: ""   // Code to add new propositionTime
    }
    issueObj.propositionTimes.push(newObj)
    setIssue(issueObj);
  };

Also in your handlepropositionTimeAddClick function, don't call it directly. Just pass the reference

{issue.propositionTimes.length - 1 === i && <button onClick={() => handlepropositionTimeAddClick(i)}>Add</button>}