Markdown Challenge Complete but Still Fails Test 3?

JavaScript
#1

Hey folks, I’m on the markdown previewer project of front-end cert and I feel that I’ve accomplished every user story but am failing tests 3 and 4.

I wasn’t sure if its because I used react redux without using two separate editor/preview components or an issue with the element’s ID- I’m at a loss, I’d appreciate any feedback, you can find my code here:

Your browser information:

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

Challenge: Build a Markdown Previewer

Link to the challenge:

#3

So , the problem is that when your using

handleTextInput = (input) => {
    this.props.changeTextValue(input.target.value)
    setTimeout(() => {
      document.getElementById('preview').innerHTML =
        marked.parse(this.props.state.textValue);
  }, 0)
  }

After execution of this function only the store state changes and react is never rerendered because there is nothing for react to change . its just your plain js doing the work .

And the set timeout does not garantee that it will provoke instantly , So in between test gets executed and test is failed as per me .

And the use of redux is really unnecessary.

See this code , much more simpler and does the work

handleTextInput = (input) => {
let EditorVal =  input.target.value;

 document.getElementById('preview').innerHTML =
        marked.parse(EditorVal);

  }

or if you really want to use redux make sure that values is passed down in the component of preview and using dangereouslySetInnerHtml (google about it ) to parse and set the value their , So that react and rerender it.

For last test i recommend reading the marked js docs as suggested in Project specifications

1 Like