I think I am close to implementing the markdown preview project in react. I can console.log the markdown, but for some reason I get an error when trying to insert the HTML. Here is the code:
//import { useState } from 'react';
const {useState} = React
//MAIN APP
function App(){
const [text, setText]=useState("Test")
function editorHandler(event){
setText(event.target.value)
}
return(
<div>
<h1> MARKDOWN PREVIEWER </h1>
<Editor onChange={editorHandler} markDown={text}/>
<Preview previewText={text}/>
</div>
)
}
ReactDOM.render(<App/>, document.getElementById("App"))
// EDITOR COMPONENT
function Editor(props){
return(
<div className="window">
<h2>editor</h2>
<textarea id="editor" value={props.markDown} onChange={props.onChange} placeHolder="Write something here"> </textarea>
</div>
)
}
// PREVIEW COMPONENT
function Preview(props){
console.log(marked(props.previewText)) // works, outputs: <p>Test</p>
function getMarkDownText() {
const rawMarkup = marked(props.previewText)
return {__html: rawMarkup};
}
return(
<div className="window">
<h2>previewer</h2>
<div id="preview" dangerouslySetInnerHTML={getMarkDownText()}> </div>
</div>
)
}
The problem seems to be with that last div (id preview). I get the following error message which is not very helpful: “Uncaught Invariant Violation: Minified React error #60”
Codepen is here if easier: https://codepen.io/rpollock03/pen/RwWvYQb?editors=1011
Grateful for an explanation of what I’m doing wrong. I am learning React so apologies if this is something silly! I’ve tried reading the docs - the marked.js ones weren’t very clear in my opinion.