React

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

function App() {
  const [updateApprovalStatus, setupdateApprovalStatus] = React.useState({
    ADVISORYID: "",
    STATUS: "APPROVED",
    REMARKS: "",
    REJECTEDREMARKS: "",
  });

  const [txtAdvisoryApprovalRemarks, settxtAdvisoryApprovalRemarks] = React.useState(
    ""
  );
  const approvalRemarksOnChange = (event) => {
    settxtAdvisoryApprovalRemarks(event.target.value);
  };
  const updateApproval = () => {
    if (updateApprovalStatus.STATUS === "APPROVED") {
      setupdateApprovalStatus((prevState) => ({
        ...prevState,
        REMARKS: txtAdvisoryApprovalRemarks,
        REJECTEDREMARKS: "",
      }));
    } else if (updateApprovalStatus.STATUS === "REJECTED") {
      //console.log('save to rejected remarks')
      setupdateApprovalStatus((prevState) => ({
        ...prevState,
        REJECTEDREMARKS: txtAdvisoryApprovalRemarks,
        REMARKS: "",
      }));
    }
    console.log("updateApprovalStatus", updateApprovalStatus); //returns the array but no remarks or rejectedremarks saved
  };
  
  return (
    <React.Fragment>
      <input
        type="text"
        name="REMARKS"
        onChange={approvalRemarksOnChange}
      />
      <br />
      <button color="primary" onClick={() => updateApproval()}>
        Save
      </button>
      <br/><br/>
      <div>{JSON.stringify(updateApprovalStatus)}</div>
      <div>{JSON.stringify(txtAdvisoryApprovalRemarks)}</div>
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"))