I'm trying to run the blog example in material ui getting started page . the problem is that the source code is:
in blog.js
import post1 from './blog-post.1.md';
.
.
.
return( <Main>{post1}<Main/>);
and in Main.js:
import ReactMarkdown from 'markdown-to-jsx';
export default function Main(props) {
return <ReactMarkdown options={options} {...props} />;
}
if I run the code I get this output:
/static/media/blog-post.1.0c315da1f0a7af641a3a.md instead of the data inside the MD file.
I want to do the same ,how can I import MD files in my create-react-app version? (without typescript)
You'll need to read the markdown object and then load it into the ReactMarkdown component. Common methods of doing this use fetch as an intermediary. For example:
import * as React from "react";
import ReactMarkdown from "markdown-to-jsx";
import post from "./post.md";
export default function MarkdownImport() {
let [readable, setReadable] = React.useState({ md: "" });
React.useEffect(() => {
fetch(post)
.then((res) => res.text())
.then((md) => {
setReadable({ md });
});
}, []);
return (
<div>
<ReactMarkdown children={readable.md} />
</div>
);
}
Working example: https://codesandbox.io/s/reactmarkdown-example-20vmg