FCC Markdown Previewer project failing on load test

Question

FCC Markdown Previewer project failing on load test

374 Views Asked by idkwhatimdoing At 21 October 2024 at 03:36

I'm trying to pass a Freecodecamp project. The project is a markdown previewer where you can enter code in a textarea and it renders it on the webpage. I have all the tests passing except two. It is supposed to preview the text on load and it does, but it rerenders and I'm not sure why. Can someone please take a look and tell me what I am doing wrong. I will have a link to my CodePen. I have two solutions that fail the same tests. One with react-hooks and one with a class component. I am using marked for the html parser. Thanks!

I am almost confident that it has something to do in the component with the textarea because that is one of the tests that is failing, but I can find anything wrong with it.

This is the text editor component:

const Editor = ({ text, setText }) => {
  return (
    <>
      <textarea id='editor' value={ text } onChange={ (e) => setText(e.target.value) } />
    </>
  );
};

Here is the state with placeholder being a string of html:

const [ text, setText ] = React.useState(placeholder);

CodePenLink

Original Q&A

There are 2 best solutions below

Matt W On 05 August 2023 at 03:33

I want to share what happened with my similar experience, coming at it from a slightly different angle. I was including my 'placeholder' markdown default text directly in my default state. Apparently, according to ChatGPT:

"when you put the default Markdown text directly between the backticks in the default state, it becomes a template literal (a special syntax used in JavaScript to create strings with embedded expressions). As a result, it's not recognized as a valid Markdown string by the marked` library, and this causes the FreeCodeCamp test to fail.

By putting the default Markdown text in a separate constant and then referencing that constant in the state, you ensure that the default text is treated as a regular string, and it can be correctly processed by the marked library, passing the test as expected."

By looking at the previous answer and the corrected codepen posted here, I was able to solve my problem.

**Shadab** · Accepted Answer

Your placeholder has html, not markdown inside it. You could try using something like this as your placeholder and it should work


const placeholder = `
# Sample Markdown Header Level

## Sample Header Level 2

### Link

Here's a link to [Codepen](https://codepen.io).

### Code Block

1.  Open the file.
2.  Find the following code block on line 21:

        <html>
          <head>
            <title>Test</title>
          </head>

3.  Update the title to match the name of your website.

### Inline Code

I think you should use an \`<addr>\` element here instead.

### List

- First item
- Second item

### Blockquote

> Dorothy followed her through many of the beautiful rooms in her castle.

### Image

![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png "Markdown Logo")

### Bold Text

I just love **bold text**.
`;

FCC Markdown Previewer project failing on load test

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REACTJS

Related Questions in REACT-REDUX

Related Questions in REACT-HOOKS

Related Questions in JAVASCRIPT-MARKED

Trending Questions

Popular # Hahtags

Popular Questions