Please assist: My markdown previewer is unable to pass the last /final test

Hello,
Please could someone assist me with my issue? My markdown previewer passes all tests, but keeps failing the final test (which is: My markdown previewer should interpret carriage returns and renders them as br (line break) elements) in spite of all my efforts.

In fact, i searched on freecodecamp forum and found a tip from this : link, which suggested adding

{breaks: true}

as a second argument to the command to convert my markdown text to html (see the previewer component in my code) , that is to :

var markdown= marked(props.markdown)

but despite this , my previewer still failed the final test.

Here is my code:
The .js files:

class App extends Component {

  render() {

    return (

      <div className= "markdown-previewer">

        <Editor />

      </div>

    )

  }

}
class Editor extends Component {

    constructor(props){

        super(props);

        this.state = {

            value: ''

        };

        this.handleChange = this.handleChange.bind(this);

    }

    componentDidMount() {

        const readmePath = require("./Initialmarkdown.md");

      

        fetch(readmePath)

          .then(response => {

            return response.text()

          })

          .then(text => {

            this.setState({

              value: text

            })

          })

      }

      handleChange(event) {

        this.setState({value: event.target.value});

      }

    render() {

        return (

            <div>

             <h2 className="text-center">Editor</h2>

             <textarea id="editor" name="editor" rows="10" cols="70" value={this.state.value} onChange={this.handleChange}/>

             <Previewer markdown= {this.state.value}/>

            </div> 

        )

    }

}

const Previewer = (props) => {

    var markdown= marked(props.markdown, {breaks: true});

    return (

        <div>

         <h2 className="text-center">Previewer</h2>

         <div id= "preview"dangerouslySetInnerHTML={{__html: markdown}} />

        </div> 

    )

}:

The Initialmarkdown.md file text:

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, 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 numberered lists too.

  2. Use just 1s if you want!

  3. And last but not least, let’s not forget embedded images:

React Logo w/ Text

hello

solid


//This is multiline code:

function anotherExample(firstLine, lastLine) {

  if (firstLine == '```' && lastLine == '```') {

    return multiLineCode;

  }

}

Please any help would be greatly appreciated. Thanks.

A post was split to a new topic: FCC Codepen not loading