Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:

Describe your issue in detail here.

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Front End Development Libraries Projects - Build a Markdown Previewer

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3 

class InputController extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: "# Hello, Marked!",
      preview: ""
    };
    this.handleChange = this.handleChange.bind(this);
  };


  handleChange = (event) => {
    const markedInput = event.target.value;
    
    this.setState({
      input: markedInput,
      preview: marked(markedInput)
    });
  };
  render() {
    return (
      <>
        <div className="wrapper">
          <div className="toolbar">
            <i className="fa-brands fa-free-code-camp"></i>
            Editor
            <i className="fa fa-arrows-alt"></i>
          </div>
          <textarea
            id="editor"
            value={this.state.input}
            onChange={this.handleChange}
          ></textarea>
        </div>
        <div className="previewWrapper">
          <div className="toolbar">
            <i className="fa-brands fa-free-code-camp"></i>
            Preview
            <i className="fa fa-arrows-alt"></i>
          </div>
          <div
            id="preview"
            dangerouslySetInnerHTML={{ __html: this.state.preview }}
          ></div>
        </div>
      </>
    );
  }
}

function App() {
  return (
    <div className="App">
      <InputController />
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("app"));

I already possess the code; my inquiry pertains to importing it into my JavaScript file. I’ve already included it in my external script in the JS settings. However, when I type in the textarea, I encounter this error.

Uncaught TypeError: marked is not a function
    at InputController

Could you help me find a way or understand the error?

4

Hello, no need to be concerned about my issue; I’ve resolved it. I utilized an older version of “marked,” and it’s now working as intended. :grinning:

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.