# Help with Markdown Previewer!

**URL:** <https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471>\
**Category:** General\
**Created:** [January 23, 2018, 5:18pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471 "2018-01-23T17:18:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 23, 2018, 5:18pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/1 "2018-01-23T17:18:24Z")

</div>

```auto
import React from 'react';
import marked from 'marked';

export class Markdown extends React.Component {
    constructor(){
        super();
        this.state = {
                value: '# Sample Markdown Heading'
        }
       this.handleChange = this.handleChange.bind(this);
    }  

    getMarkup(){
        var md = marked(this.state.value);
        return {__html: md};
    }

    handleChange(e){
        this.setState({
            value: e.target.value
        })
    }

    render(){
        return (
                    <div className='row'>
        <div className="input-div col-md-6">
            <h2>Input</h2>
            <textarea onChange={this.handleChange} value={this.state.value}>
                    </textarea>
        </div>
        <div className="result-div col-md-6">
            <h2>Result</h2>
            <textarea readOnly={true} value={this.state.value}>
                    <div dangerouslySetInnerHTML={this.getMarkup}></div>
                    </textarea>
        </div>
        </div>
        );
    }
}

```

When I try to change the input I get the same output as the input. I imported and installed the marked library but when i use it in the _getMarkup()_ function it doesen’t appear to work. Please help the above is my code.

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 23, 2018, 6:36pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/2 "2018-01-23T18:36:48Z")

</div>

Looks like you should be calling the `getMarkup` function rather than just referencing it.

```auto
<div dangerouslySetInnerHTML={this.getMarkup()}></div>

```

---

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 23, 2018, 7:53pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/3 "2018-01-23T19:53:16Z")

</div>

I tried. it still doesen’t work…

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 23, 2018, 7:57pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/4 "2018-01-23T19:57:25Z")

</div>

Try logging out the contents of the Marked output:

```auto
getMarkup(){
        var md = marked(this.state.value);
        console.log(md);
        return {__html: md};
    }

```

---

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 23, 2018, 9:13pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/5 "2018-01-23T21:13:01Z")

</div>

I’ve done what you have said and I get this output:

```auto
<h1 id="sample-markdown-heading">Sample Markdown Heading</h1>

```

It seems to work but I don’tknow how to pass this input to the output’s textarea.

---

<div class="post-metadata">

**Author:** ![PortableStick](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/portablestick/32/65591_2.png) [@PortableStick](https://forum.freecodecamp.org/u/PortableStick)\
**Post date:** [January 23, 2018, 9:23pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/6 "2018-01-23T21:23:28Z")

</div>

Let’s try not using the method and just passing an object directly:

```auto
<div dangerouslySetInnerHTML={{__html: marked(this.state.value)}}></div>

```

If that fails, try hard coding a string into the object

```auto
<div dangerouslySetInnerHTML={{__html: marked("This *is* a _test_")}}></div>

```

---

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 24, 2018, 3:09pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/7 "2018-01-24T15:09:42Z")

</div>

I’ve done that and I get this output:

```auto
[object Object]

```

and also on the console I get:

```auto
Warning: Use the `defaultValue` or `value` props instead of setting children on <textarea>.

```

---

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 24, 2018, 4:49pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/8 "2018-01-24T16:49:38Z")

</div>

Never mind I’ve solved it I just changed the `<textarea>` to be a `<div>`and added the dangerouslySetInnerHTML. Thanks anyway !! 🙂

---

<div class="post-metadata">

**Author:** ![JohnL3](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnl3/32/16459_2.png) [@JohnL3](https://forum.freecodecamp.org/u/JohnL3)\
**Post date:** [January 24, 2018, 5:10pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/9 "2018-01-24T17:10:37Z")

</div>

> [@anon56825276](#):
>
> \<div dangerouslySetInnerHTML={this.getMarkup}\>\</div\>

change to … this.getMarkup()

why have you this div wrapped in a textarea … reomove the textarea wrapping the div.  
think it should work fine then … as it looks pretty similar to mine.

---

<div class="post-metadata">

**Author:** ![anon56825276](https://avatars.discourse-cdn.com/v4/letter/a/cdc98d/32.png) [@anon56825276](https://forum.freecodecamp.org/u/anon56825276)\
**Post date:** [January 24, 2018, 5:22pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/10 "2018-01-24T17:22:24Z")

</div>

Yes I’ve done that already but anyway thanks. 🙂

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 8:29pm UTC](https://forum.freecodecamp.org/t/help-with-markdown-previewer/170471/11 "2021-01-17T20:29:30Z")

</div>