A mildly annoying problem with the test script (markdown previewer)

1

hello! i have returned to fcc after a long absence and i am currently doing the react challenges (on a side note i think the current layout is better because the old fcc took to long to introduce react making you do a lot of challenges with css + html + jquery)

so, i wrote the markdown preview with react and redux (i suppose redux is overkill here lol), one of the optional challenges for it it was to make links open in another tab
the imo best way to do it was the following:

let links = document.getElementsByTagName('a'); //stackoverflow is amazing

for(let i = 0; i<links.length; i++) {
   links[i].target = "_blank";
}

but it broke the test #6 (When my markdown previewer first loads, the default markdown in the #editor field should be rendered as HTML in the #preview element), the pre-formatted text renders properly and the links open in a new tab but the text suit thinks it didn’t render… if i comment this piece of code my app passes all the tests but the links don’t open in a new tab. certainly there is a way to open them while making the app pass the test but i don’t really see a reason for that since i think i completed the challenge and don’t really want to appease the caprices of the test script -_-

p.s. i run that code with componentDidMount hook, if i try componentWillMount the pages don’t open in a new tab but it passes test #6, lol

p.p.s. forget it i will have to re-do it, i have problems with new links -_-

2

Since you use marked.js, you should use the in-build method to add target:="_blank" to a tag.

Something like this would do:

const renderer = new marked.Renderer();
renderer.link = function (href, title, text) {
  return `<a target="_blank" href="${href}">${text}</a>`;
};

Then inside the render of your Component:

dangerouslySetInnerHTML={ {__html: marked(this.props.input, {sanitize: true, gfm: true, breaks: true, renderer: renderer}) } }
3

yeah, i have seen that method being used by the fcc app, but i don’t like it, i wanted a native solution
btw i found out the problem, when i went to sleep and woke up the next morning, as they say where i live “morning is wiser than evening” :3 i simply called those hooks in the wrong component, i had to call them in the component that actually renders the html while i called them in the wrapper, when i switched that stuff to the proper component my code passed all the tests and also began to work properly on updates, here is the link btw, i already styled it https://codepen.io/ead/pen/bZxJGE

4

React has a function called render() that let’s you pass in a template and the element to render it into, and it handles the rest. We can create something similar with just a few lines of vanilla JavaScript. First, let’s set up our render() method.

5

Well I’m not sure what you mean, I was saying that since OP used marked.js, why not use its in-built method to handle the links for us? It was like, you already imported a library then you wrote your own function to do the same thing. We don’t need to reinvent the wheels. Also, modifying Real DOM directly in React is discouraged anyway.

6

Redux here is overkill for sure :grinning:

Also using document.someQueryMethod in React is not a good practice. You should leave DOM manipulation to React.

My refactored version: https://codepen.io/jenovs/pen/MxLKvy?editors=0010

1 Like
7

grr, these test suits
now with drum machine, i wrote it and then realized i had to uglify the code to make it pass the suit by:
a) adding completely unnecessary audio elements inside the buttons
b) having to target them with javascript instead of simply playing the sounds choosing the source from the object by the button id
c) since those audio elements have to have the very same ids i need for my buttons i had to uglify my buttons ids like button value + a symbol and use them to pull stuff from objects like id[0]…

8

but you don’t manipulate dom with react there, you use marked lib which i wanted to avoid from the very beginning, i don’t see how using some lib which probably calls the same javascript as i did under the hood is any better

9

And what is marked in your code if not marked library?

<div id="preview" dangerouslySetInnerHTML={{__html: marked(this.props.input, {breaks: true})}} />
10

certainly, but i personally want to use my codepens as a reference for myself so i try to add there different stuff like that completely redundant redux so if i want to write a project that needs redux i could quickly refresh how to do the basic redux stuff simply by checking my old codepen, that’s why i didn’t want to use marked lib because the task of changing links with javascript is significantly more general than some markdown task which i might never need again. your code is interesting and i am thankful for your refactoring because you did it a new way to me without class declarations, fcc could get deeper into react and react native instead of the imo less useful chapter about visualization…