Markdown previewer question

JavaScript
1

//question is . this code doesnt parse the input from textarea element, why is it soo? ive used both class components and functional components to no avail. oh also im using styled components soo theres no css. i tried this code ( dangerouslySetInnerHTML={{__html:marked.({output})}}) and it didnt render anything. thank you


import React, { useState } from 'react'
import { Container, Container2, InputArea } from './theme';
import {marked} from 'marked';

export default function WriteHere() {
    const [output, setOutput] = useState('');
    return (
    <Container>
      <InputArea rows={10} id='editor' onChange={(event) =>{
       setOutput(event.target.value)}} value={output}></InputArea>
      <Container2 id="preview" dangerouslySetInnerHTML={{__html:marked.(output)}}></Container2>

      </Container>
      
    )
      }```
2

is there an error message?

3

None. It either doesnt render(class component) or when you type in(functional component);
#this is h1
##this is h2

It renders, but it doesnt size it .it comes out as normal string .

4

If you want good debugging, put the project on codepen and post a link. Running code is always easier to debug.

This part looks suspicious. Before you return in your component, try console.log(marked.(output)); to see what that does and make sure you have the codepen console and/or your browser console open. You may want to consult the marked documentation as well.

1 Like
5

Thanks for the heads up on debugging. I’ll try to do that.

for this => dangerouslySetInnerHTML={{__html:marked.(output)}}.
I did this because marked.parse(output didnt work). but ill try to console.log it out . Thanks for the pointers! really appreciate it

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.