Help needed with markdown

Hi everydody. I’m revising an asigment I did some time ago. The markdown library I used in the past is no longer available. I’m using now React Markdown. But is not working. I would apreciate very much any help. Thanks in advance. Regards.
Here is my code.

import React, {Component} from "react";
import ReactMarkdown from 'react-markdown';


//This is all the text I'm going to show by default in the editor and in the reviewer as well
const texts=`
# Mamen's examples        ![](https://i.ibb.co/dQCHj0G/Mamen-MD-project.png)   
   
## Some placeholders
### How the previewer works

There are two sections. The first section, the Editor, contains some markedown elements. The second section, the Preview, shows the HTML version of what is introduced in the Editor. I have placed some examples, but feel free to change whatever you want in order to apreciate the changes in the Preview. For instance this is a paragraph, with a bold word at the end. See how I have made it. **Enjoy!**
***
First of all, I sent to you my best whises for this **New Year** :) !

All I want for **2022** is:
* Health
* Frienship
* Time to
  * adquire new knowledge
  * read
  * write 

 > I'm quoting myself.

## Some code samples
  A line of code \`<h1>\`

 A bloque of code  
~~~
  import React, {Component} from "react";
  
  import {marked} from 'marked';  
~~~ 

To know more about me visit [my profile in GitHub](https://github.com/Amapola-Negra)

Write mi at **Mod edit**
****

`
class MyMarkdown extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          input: texts                 
        };
    this.handleChange =this.handleChange.bind(this);
    }
    handleChange(event){
      this.setState({input:event.target.value})
    }

    render (){
      
       return (
            <div id="contenedor"> 
            <div id="conten-editor">
              <h2 className="centrado">Editor</h2>
             <textarea id="editor" value={this.state.input} onChange={this.handleChange}/>            
            </div>
            <div id="conten-preview">
                <h2 className="centrado">Preview</h2>
                <div id="preview" dangerouslySetInnerHTML={{__html:marked(this.state.input)}}>
                    <ReactMarkdown source={texts} />
                </div>
           </div>
           </div>
        )
    }
}
const About = () => {
  return (
    <div>
      <h1 className="centrado title"> Wellcome to Mamen's Markdown Previewer </h1>
      <MyMarkdown /> 
    </div>
  );
};
// Export this function in order to render it in index.js
export default About;

Can you post a live version on CodeSandbox or StackBlitz?


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.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

I also removed the email from the code just so it doesn’t get crawled by some bot and you end up getting spammed.

It doesn’t look like source is a valid prop for the component (docs).

Did you try just passing the markdown as the content to the component?

<ReactMarkdown>{theMarkdownString}</ReactMarkdown>

I apologize for the inconvenience. Thank you very much for your time. I think I cannot do what you say. It is not just a string. The app allows the user to interact with it. The user types markdown in the textarea and in the other side of the screen the content changes accordingly. I know it is very difficult to understand without seen it. I’m afraid I don’t have a live version of this concrete implementation. But I have a link of a deployment of the previous version, in order you can see what the app has to do.
https://affectionate-wiles-2725cf.netlify.app/

Thanks again.

Regards :slight_smile:

Regards :slight_smile: