Search code examples
javascriptreactjsdraftjs

Facing issues showing HTML formatted data of draft js in UI

I am facing an issue showing my text in HTML format you can see below I am getting output correctly from the editor but when I display this text in my UI that style is not getting applied

Getting output in this format

<p>
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
  <strong>It has survived not only five centuries.</strong>
</p>\n

This is onChange

const onChange = (newEditorState) => {
  setEditorState(newEditorState);
  setContent(
    draftToHtml(convertToRaw(newEditorState.getCurrentContent()))
  );
};

<Box
  mt={2}
  display="flex"
  justifyContent="space-between"
  alignItems="center"
>
  <Box>
    <Typography variant="subtitle2">
      {formikForm.values.dta
        ? formikForm.values.dta
        : 'Add data here.'
      }
    </Typography>
  </Box>
</Box>
Solution

  • You can try this to display html in your component:

    <Typography variant="subtitle2">
  {formikForm.values.execSummary
    ? formikForm.values.execSummary
    : <div dangerouslySetInnerHTML={{__html: yourDataHere}}></div>
  }
</Typography>

    Hope this works for you, good luck.