Ah!
So it seems i used the install command npm install -g marked which installed it to my machine but not locally. So i tried the --save and got it to work.
Three follow up questions:
- if it was saved to my machine how would I have gotten it to work without redownloading it to the project?
- Why is the property called “dangerously set InnerHTML” (i realize that’s discussing why you shouldn’t set it, but how does it function?)
- My element refuses to update even though I’ve passed the input of the textarea from props. It gives it the initial state but isnt updating after textarea updates. Is there a trick to that?
Under the hood:
import React, { Component } from "react";
import TextInput from './TextInput';
import Preview from './Preview';
class MarkdownPreviewer extends Component {
constructor(props) {
super(props);
this.state = {
input: "test",
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
let newInput = e.target.value;
this.setState({
input: newInput
});
}
render() {
return (
<div id="content">
<div id="left">
<TextInput change={this.handleChange} input={this.state.input}/>
</div>
<div id="right">
<Preview input={this.state.input} />
</div>
</div>
);
}
}
export default MarkdownPreviewer;
import React, { Component } from "react";
import marked from "marked";
class Preview extends Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<h2>Preview</h2>
<div id = "preview" dangerouslySetInnerHTML={{__html:marked(this.props.input)}}></div>
</div>
);
}
}
export default Preview;
Edit: got it to work by using a self closing textarea instead of the two separate. Thanks everyone!