Help with Markdown Previewer-React test #4 fail

Hello everyone, I’ve been looking for the reason this test won’t pass.
I’ve read through several posts here, and I’ve tried placing the ‘preview’ id correctly.
I still fail the test.

I am sharing my project from playcode: Link.

(I have also run it locally and in Code Pen. The basic functionality works, but the same test fails).

Thank you for your feedback!

This is what the output of App.js looks like:

Now I have simplified the code more, leaving only 1 state variable (the user’s input into the text area), and removing unnecessary useEffects( as lasjorg had suggested in a feedback post last year). I am basically calling the parsing methods inline , in the returned divs.

But I still fail the test!

hi and welcome to the forum.

Can you provide a link to the project you are working on for our reference?

Thank you! Yes, the link should be above, I will also place it here also:
https://playcode.io/2355994
Do you see it?

I was hoping you would provide a link to the actual project description as that is needed to understand what you are working on.

Ah yes, It is one of the projects in the Front End Dev certification: Build a Markdown Previewer.

My project is working but the test won’t pass. I’m not sure what to do. Thank you for your attention.

I have a version of it running in React 18:
and in React 17: Link

same result, the test won’t pass. I don’t know what to do.

i don’t see your simplified code when i click on the link you shared to the code.
I think it is a good idea to simplify as you said. Please share the link to the simplified code as well.

Sure, you can see the project here: Link

It can be simplified more, I think, but I don’t know how.

One thought that may be worth trying (keeping in mind that I haven’t tried this project myself) is that instead of having the initial state of textInput set to an empty string you could give it the initial value that is currently in your defaultText variable? Thus skipping one react lifecycle that redraws the component when the state is updated?

Might be worth seeing if that changes anything.

I will try that now! Thank you.

Thank you for the recommendation, that was worth trying. But I get the same result.

I was wondering, hbar1st: would asking this question in the FCC Discord be helpful?

I would simplify this considerably.

  1. Move the default text out of the component, then use the defaultText variable as the initial state for the text input state (i.e. as the useState argument).

  2. Remove all the code related to setting the default text, including the conditional rendering (you will only have one state variable).

  3. You can keep the useMemo but I would just inline that code in the JSX (without useMemo).

  4. Make the textarea a controlled input (set the value to the state variable).


When I do this, it passes all the test and it works using React 19. Additionally, the component is only around 40 lines of code and is much easier to reason about.

Thank you very much!! It works. :clap:

1 Like

apologies for not getting back to you earlier. I’m glad you managed to fix it. (nicely done)

1 Like