Could someone tell me what am I doing wrong?
import React, { Component } from 'react';
import marked from 'marked';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.takeInput = this.takeInput.bind(this);
this.state = {
text: ''
}
}
takeInput(event) {
this.setState({text: event.target.value});
}
giveOutput() {
const output = marked(this.state.text, {sanitize: true});
return {__html: output};
}
render() {
return (
<div className="App">
<header className="header">
<h1>GitHub Markdown Previewer</h1>
</header>
<div className="wrapper">
<div className="input">
<textarea onChange={this.takeInput}/>
</div>
<div className="output" dangerouslySetInnerHTML={this.giveOutput()}/>
</div>
</div>
);
}
}
export default App;
When I enter input in the textarea I get the exact same output in the output div…
I’ve found this solution on StackOverflow since docs for react-marked on npm are prehistoric, but obviously this doesn’t work either.
Help?