Markdown component not rendering from content stored in State - reactjs

Question

I'm attempting to render Markdown using 'react-markdown' and setting the content as state. This state is set in componentDidMount, and console logging the state successfully logs the content like so (it's just nonsense as this is an example while I set it up):
**Bold text**
*Italic text*
__Underlined text__
~~Strikethrough text~~
List
- Hello
Numbered list
1. Number one
Image
![AA.png](/uploads/AA_6834a9a7ea.png)
However, when I then try to render my content in my component, it just comes through as blank.... Which I can't figure out why it's happening.
Here's my component code:
import React, { Component } from 'react';
import Strapi from 'strapi-sdk-javascript/build/main';
import Moment from 'react-moment';
import Markdown from 'react-markdown';
import './blog.css';
import MainHeader from '../global/main-header'
import Footer from '../global/footer'
class IndividualBlogPost extends Component {
constructor(props) {
super(props)
this.state = {
title: '',
description: '',
datePosted: '',
content: '',
author: ''
}
}
async componentDidMount() {
const params = this.props.match.params.id
try {
const posts = await strapiInstance.getEntry('blog-posts', params)
this.setState({
title: posts.Title,
description: posts.Description,
datePosted: posts.created_at,
content: posts.Content,
author: `${posts.created_by.firstname} ${posts.created_by.lastname}`
})
console.log(this.state.content)
}
catch(err) {
console.log(err)
}
}
render() {
const content = this.state.content
return (
<div>
<MainHeader />
<section className="individual-blogpost-section">
<div className="individual-blogpost-container">
<h1 className="individual-blogpost-heading">{this.state.title}</h1>
<div className="individual-blogpost-author-datePosted">
<p className="individual-blog-post-title-paragraph">{this.state.author} | <Moment format="MMM Do YYYY">{this.state.datePosted}</Moment></p>
</div>
<h4 className="individual-blogpost-description">{this.state.description}</h4>
<div className="individual-blogpost-content">
<Markdown src={content} />
</div>
</div>
</section>
<Footer />
</div>
)
}
}
export default IndividualBlogPost
As you can hopefully see, I'm attempting to set a const named content as this.state.content, and then passing the source of the markdown in to the Markdown component.
This is the first time I'm using Markdown, so I'm probably doing something obviously wrong, but any help would be appreciated!

Answer 1

According to their documentation, the content is actually passed as children to Markdown.
So you can do this:
<div className="individual-blogpost-content">
<Markdown >
{content}
</Markdown>
</div>

Answer 2

i am add package npm i remarkable.
and wrote this code
import React from "react";
import { Remarkable } from "remarkable";
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: "Hello, **world**!" };
}
handleChange(e) {
this.setState({ value: e.target.value });
}
getRawMarkup() {
return { __html: this.md.render(this.state.value) };
}
render() {
return (
<div className="MarkdownEditor">
<h3>Input</h3>
<label htmlFor="markdown-content">Enter some markdown</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Output</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}
export default MarkdownEditor;
Work Demo