I need some help please with the markdown previewer

1

I am doing this project with es6 and react, I have been caught and there are 4 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)

styles.scss

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Germania+One" rel="stylesheet:400,700');
// Set your brand colors
$blue: #0dcbe0;
$blue-light: #00ffe9;
$green-light: #00ffcb;
$Light-Steel-Blue: #B0C4DE;

// Update Bulma's global variables
$family-sans-serif: "Germania One", cursive;
$grey-light: black;
$link: $blue;
$background: red;

// Update some of Bulma's component variables
$body-background-color: $Light-Steel-Blue;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "~bulma/bulma";
@import "~bulma/sass/utilities/all";
@import "~bulma/sass/base/all";
@import "~bulma/sass/elements/button";
@import "~bulma/sass/layout/all";

html, body {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
}

.editorWrap {
  margin: 100px auto;
  position: center;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.toolbar {
  position: center;
  padding: 7px 7px 6px 6px;
  width: 800px;
  font-family: Germania One, cursive;
  font-size: 20px;
  color: black;
}

.toolbar i {
  width: 25px;
  color: black;
  margin-left: 325px;
}

.i.fa-free-code-camp {
  position: absolute;
  display: flex;
}

#editor {
  background-color: darkgrey;
  text-align: justify-all;
  width: 800px;
  height: auto;
  display: flex;
}

.editorWrap textarea {
  min-height: 200px;
  font-size: 15px;
}

.converter {
  text-align: justify-all;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  min-height: 200px;
}

.toolbar {
  position: relative;
  background-color: #4aa3a3;
  padding-right: 4px;
  border: 1px solid #1d2f2f;
  box-shadow: 1px 1px 10px 2px #3a5f5f;
  font-family: Germania One, cursive;
  display: inline-block;
  font-size: 20px;
  color: black;
}

.previewWrap #preview {
  margin-left: 5px;
  margin-top: -10px;
}

#preview {
  background-color: darkgrey;
  text-align: justify-all;
  width: 800px;
  height: auto;
  display: inline-block;
  color: black;
  min-height: 200px;
}

pre {
  -webkit-overflow-scrolling: touch;
  background-color: lightgrey;
  color: red;
  font-size: 0.875em;
  overflow-x: auto;
  padding: 1.25rem 1.5rem;
  white-space: pre;
  word-wrap: normal;
}

#preview code {
  background: white;
  padding: 1px 4px 2px 4px;
  font-size: 15px;
  font-weight: bold;
}

AppIndex.jsx

import Visual from "./Visual"
import Form from "./Form"

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

		</div>
	)

}

Thank you very much for your help and collaboration