Help Build a Markdown Previewer

Code Feedback
1

Hi everyone ,

After a long time, I am locked in the project to build a markdown previewer, there are four tests that do not pass me. 3, 4, 6 and 7. this is my code:

Form.jsx

import {reduxForm, Field, Form} from "redux-form";

function component() {
	return (
		<div class="editorWrap">
			<div class="toolbar">
				<i class="fa fa-free-code-camp" title="no-stack-dub-sack"/>
				Editor
			</div>
			<Form>
				<Field
					component="textarea"
					id="editor"
					name="editor"
					type="text"
				/>
			</Form>
		</div>
	)
}

const editor =
	`# Welcome to my React Markdown Previewer!

## This is a sub-heading...
### And here's some other cool stuff:
  
Heres some code, \`<div></div>\`, between 2 backticks.

\`\`\`
// this is multi-line code:

function anotherExample(firstLine, lastLine) {
  if (firstLine == '\`\`\`' && lastLine == '\`\`\`') {
    return multiLineCode;
  }
}
\`\`\`
  
You can also make text **bold**... whoa!
Or _italic_.
Or... wait for it... **_both!_**
And feel free to go crazy ~~crossing stuff out~~.

There's also [links](https://www.freecodecamp.com), and
> Block Quotes!

And if you want to get really crazy, even tables:

Wild Header | Crazy Header | Another Header?
------------ | ------------- | ------------- 
Your content can | be here, and it | can be here....
And here. | Okay. | I think we get it.

- And of course there are lists.
  - Some are bulleted.
     - With different indentation levels.
        - That look like this.


1. And there are numbererd lists too.
1. Use just 1s if you want! 
1. But the list goes on...
- Even if you use dashes or asterisks.
* And last but not least, let's not forget embedded images:

![React Logo w/ Text](https://goo.gl/Umyytc)
`

export default reduxForm({form: 'editor', initialValues: {editor}})(component);

Visual.jsx

import {connect} from "inferno-redux";
import {formValueSelector} from "redux-form";
import ReactMarkdown from "react-markdown/with-html";

function component({source}) {
	return <div class="converter">
		<div class="previeWrap">
		<div class="toolbar">
			<i class="fa fa-free-code-camp" title="no-stack-dub-sack"/>
			Previewer
		</div>
		</div>
	<div id="preview">
		<ReactMarkdown source={source}/>
	</div>
	</div>
}

const selector = formValueSelector('editor')
export default connect((state) => {
	const source = selector(state, 'editor');

	return {source};
})(component)

AppIndex.jsx

import Form from "./Form"

export default function component() {
	return (
		<div>
			<Form/>
			<Visual/>

		</div>
	)
}

If there is someone who can help me, I would be very grateful.

Thank You :smiley:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

Please go back through your post, and edit it to account for any anomalies.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

3

Now better? I don’t know if I understood correctly, sorry and thanks