How to render a html code input?

Question

I am creating an Reactjs App that gets input in a text area. I want it to render the code if there is any html markup and show in another div block and bold or italic the text as it is done here in stackoverflow's text editor like or mkd.. Here is my code:

class App extends React.Component{
      constructor(props){
              super(props);
              this.state={markdown:''};
              this.handleChange=this.handleChange.bind(this);
      }
      handleChange(event){
             this.setState({markdown:event.target.value});
      }
      render(){
             return(<div className="main">
                    <textarea onChange={this.handleChange} type="text"/>
                    <div className="textShow">{this.state.markdown}</div>
                    </div>
             )
      }
}

What improvements should I make to it to render html markup and add other functionalities I have mentioned?

Do you want to render the markdown, or render the code you write in a syntax highlighting block? or both, like when you write in your text area for example : ``` **my Code is: ** console.log('hello'); ``` it will be rendered to a bold text with a syntax highlighted console.log for that use marked package with hilight.js — Fcmam5
– Fcmam5, Commented Jul 24, 2018 at 11:34

Tomas Kukis · Accepted Answer · 2018-07-24 11:49:19Z

3

You can use dangerouslySetInnerHTML like in this tip: https://zhenyong.github.io/react/tips/dangerously-set-inner-html.html

class Application extends React.Component {
     constructor(props){
              super(props);
              this.state={markdown:''};
              this.handleChange=this.handleChange.bind(this);
      }
      handleChange(event){
             this.setState({markdown:event.target.value});
      }
      render(){
             return(<div className="main">
                    <textarea onChange={this.handleChange} type="text"/>
                     <div className="textShow" 
                       dangerouslySetInnerHTML={{__html: this.state.markdown}} />

                    </div>
             )
      }
}

answered Jul 24, 2018 at 11:49

Tomas Kukis

703 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tomas Kukis Over a year ago

add <b>My text</b> inside text area

Ali Elzoheiry · Accepted Answer · 2018-07-24 11:56:45Z

2

This tool does what you need, it can be used to display a text editor or render text from markdown or html

https://draftjs.org/

answered Jul 24, 2018 at 11:56

Ali Elzoheiry

1,6821 gold badge14 silver badges16 bronze badges

Comments

yotke · Accepted Answer · 2018-07-24 15:20:15Z

2

Insert raw HTML using dangerouslySetInnerHTML as a last resort only.

According to the docs, "This is mainly for cooperating with DOM string manipulation libraries". When you use it, you're giving up the benefit of React's DOM management.

I would use npm module html-to-react: https://www.npmjs.com/package/html-to-react

edited Jul 24, 2018 at 15:20

answered Jul 24, 2018 at 11:58

yotke

1,2082 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to render a html code input?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related