Need help! React App is not working in CodePen

[mailmeatshraddha]

Hi Everyone,

I made Markdown previewer in Vscode and it was working completely fine. Now, I am trying to put the code in CodePen. I have made the necessary changes, but still my react app is not showing up. Could anyone please have a look into this and help me out.

Link: Markdown Previewer CodePen

Thanks,
Shraddha

[kevinSmith]

There is nothing wrong with your markdown - it is a JS problem in a library, I think.

When I open up your console window, I see:

TypeError: Cannot read property ‘replace’ of undefined
Please report this to GitHub - markedjs/marked: A markdown parser and compiler. Built for speed..
at Lexer.lex (marked.js:138)
// …

So, that is an issue in with marked. You are calling marked, it is in the render method of MarkdownPreviewer with marked(props.markdown). If I put console.log(props.markdown); on the line before the return for that method, I see that it is undefined. My guess is that that marked function is expecting something other than undefined.

[mailmeatshraddha]

Thanks @kevinSmith for hinting the problem. I was looking into it after reading your comment. I made two changes to the code and it worked:

1. As pointed by you, I realised that the components MarkdownEditor and MarkdownPreviewer were not getting data as props from Redux. I didn’t connect them properly with Redux. So, I updated the code as:

const MarkdownEditor = ReactRedux.connect(mapStateToProps, {
  setMarkdown,
  editorMaximised,
  editorMinimised,
  previewerMinimised
})(MarkdownEditor_);

and

const MarkdownPreviewer = ReactRedux.connect(mapStateToPropss, {
  previewerMaximised,
  previewerMinimised,
  editorMinimised
})(MarkdownPreviewer_);

2. Since marked was not getting identified as a function in the code, I added an import statement as:

import marked from "https://cdn.skypack.dev/marked@2.0.3";

My code is working now. It would be great if you could have a review. Thanks a lot for your help!!

Regards,
Shraddha

[kevinSmith]

I’d be happy to look at the finished project. Create a thread to review it and tag me in it.