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:
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