[SOLVED] react-markdown don´t render Markdown

react-markdown don´t render Markdown

I'm using react-markdown to render a value of an input. The problem is that the reduction is not being processed as it should be, for example if I use this expression " # hello world ", the text should be displayed as text in h1, but it displays it normally, as well as other expressions cannot be performed.

//setDataForm coming from parent 
//const [dataForm, setDataForm] = useState()

const NoteForm = ({setDataForm})=> {
   const handleChange = (e) => {
        const { name, value } = e.target
        setDataForm({
            ...dataForm,
            [name]: value
        })
   }

   <textarea
     placeholder="Description"
     onChange={handleChange}
     name="description"
   ></textarea>

   <ReactMarkdown
     className="w-full h-[100vh] outline-none"
     children={dataForm?.description}
     remarkPlugins={[remarkGfm]}
     escapeHtml={false}
   />
}

Solution

The problem here is that React-markdown map the markdown text to real html elements, and you're using tailwindcss.

Tailwind takes out all default styles applied to html elements. Luckily there is a really easy workaround:

.markdown > * {
  all: revert;
}

Create a class like this in your "index.css" file that contains your tailwind directives. After that, just put "markdown" in the ReactMarkdown component classes and you're good to go.