MDeditor not converting the html content from the server and onChange is not working

[eurotechmaritime]

let tableData = null;

const buttonStyle = {
  marginLeft: "10px",
};

function AntiRagging() {
  const baseUrl = `${process.env.REACT_APP_BASE_URL}/cms/anti-ragging-policy`;
  const [title, setTitle] = useState("");
  const [committee, setCommittee] = useState(JSON.stringify([[""]]));
  const [policy, setPolicy] = useState("");
  const [note, setNote] = useState("");
  const [policyId, setPolicyId] = useState(null);

  const handleForm = (event, key) => {
    switch (key) {
      case "COMMITTEE":
        setCommittee(JSON.stringify(event));
        break;
      case "POLICY":
        setPolicy(() => event); // Set policy as a function
        break;
      case "NOTE":
        setNote(() => event); // Set note as a function
        break;
      default:
        setPolicy(() => event); // Default for policy
        break;
    }
  };

  const fetchPolicy = () => {
    axios
      .get(baseUrl)
      .then(async (data) => {
        tableData = data.data.data;
        if (tableData.length > 0) {
          setTitle(tableData[0].title);
          setPolicy(() => tableData[0].description);
          setCommittee(JSON.stringify(tableData[0].committee || [[""]]));
          setNote(() => tableData[0].footer_anti_ragging);
          setPolicyId(tableData[0].id);
        } else {
          setTitle("");
          setPolicy("");
          setCommittee(JSON.stringify([[""]]));
          setNote("");
          setPolicyId(null);
        }
      })
      .catch((error) => {
        console.error("Error fetching policy data:", error);
        setCommittee(JSON.stringify([[""]]));
      });
  };

  useEffect(() => {
    fetchPolicy();
  }, []);

  return (
    <DashboardLayout>
      <DashboardNavbar />
      <Card sx={{ height: "100%", padding: "10px 40px 40px 10px" }}>
        <MDBox>
          <MDBox mt={2}>
            <Grid container spacing={2}>
              <Grid item xs={12}>
                <MDInput
                  type="type"
                  label="Title"
                  value={title}
                  fullWidth
                  onChange={(e) => handleTitle(e)}
                />
              </Grid>
              <Grid item xs={12}>
                <MDTypography variant="h5" fontWeight="bold">
                  Anti Ragging Committee Table
                </MDTypography>
                <TableEditor
                  value={JSON.parse(committee)}
                  onChange={(e) => handleForm(e, "COMMITTEE")}
                />
              </Grid>
              <Grid item xs={12}>
                <MDTypography variant="h5" fontWeight="bold">
                  Anti Ragging Policy
                </MDTypography>
                <MDEditor value={() => policy} onChange={(e) => handleForm(e, "POLICY")} />
              </Grid>
              <Grid item xs={12}>
                <MDTypography variant="h5" fontWeight="bold">
                  Note
                </MDTypography>
                <MDEditor value={() => note} onChange={(e) => handleForm(e, "NOTE")} />
              </Grid>
            </Grid>
            <MDBox mt={3} width="20%" display="flex" justifyContent="space-between">
              <MDButton variant="outlined" color="info" fullWidth>
                CANCEL
              </MDButton>
              <MDButton
                style={buttonStyle}
                variant="gradient"
                color="info"
                fullWidth
                onClick={performAction}
              >
                SAVE
              </MDButton>
            </MDBox>
          </MDBox>
        </MDBox>
      </Card>
    </DashboardLayout>
  );
}

export default AntiRagging;

the handleForm in MDEditor , is not calling atall and the fetched value from the server is not displaying as a content inside the editor component itself.

[github-actions]

@eurotechmaritime this issue was automatically closed because it did not follow our rules:

IMPORTANT: Please use the following link to create a new issue:

https://www.creative-tim.com/new-issue/material-dashboard-pro-react

**If your issue was not created using the app above, it will be closed immediately.**



Love Creative Tim? Do you need Angular, React, Vuejs or HTML? You can visit:
👉  https://www.creative-tim.com/bundles
👉  https://www.creative-tim.com