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);
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
### Bold Text
I just love **bold text**.
`;