What is the process for importing an md file in a create-react-app project using JavaScript?

Question

What is the process for importing an md file in a create-react-app project using JavaScript?

Attempting to execute the blog example provided on Material UI's getting started page. However, encountering an issue with the source code:

Inside 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} />;
}

Upon running the code, receiving the following output:

/static/media/blog-post.1.0c315da1f0a7af641a3a.md

instead of the content within the MD file.

Desiring to achieve the same result, how can I import MD files in my create-react-app version? (excluding TypeScript)

javascript reactjs material-ui

Answer 1

Answer №1

To display the markdown content in a ReactMarkdown component, you first need to retrieve and load the markdown object. One common approach is to use the fetch method as an intermediary. Here's an example implementation:

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>
  );
}

Check out a working sample here: https://codesandbox.io/s/reactmarkdown-example-20vmg

Answer 2

To display the markdown content in a ReactMarkdown component, you first need to retrieve and load the markdown object. One common approach is to use the fetch method as an intermediary. Here's an example implementation:

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>
  );
}

Check out a working sample here: https://codesandbox.io/s/reactmarkdown-example-20vmg

What is the process for importing an md file in a create-react-app project using JavaScript?

Answer №1

Similar questions

Error occurred while attempting to upload a file using multipart form data: TypeError message displayed - Unable to access properties of undefined (specifically '0')

I am looking to export multiple 'Pure components'

What is the best way to verify a user's login status in AngularJS using $routeChangeStart event?

Placing a button above another element using CSS styled components

Can you explain the functioning of knockout container less syntax? (does it have any drawbacks?)

Unexpected output from Material UI Textfield

Prompt for confirmation in ASP.NET code-behind with conditions

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

Enhancing WordPress Menu Items with the 'data-hover' Attribute

How can I best fill the HTML using React?

Challenges with fading images using jQuery

Sort an array using another array as the reference in JavaScript

What is the reason behind Q.js promises becoming asynchronous once they have been resolved?

Using Node.js Express to serve a React build version

Guide to iterating within a loop with a variable number of iterations above or below the specified amount in JavaScript

Beginner - managing tasks with React and TypeScript

Chrome on OSX Mavericks threw a RangeError because the maximum call stack size was exceeded

What is the solution for fixing scrolling while keeping the header fixed and ensuring that the widths of headers and cells are equal?

The robot will automatically update its own message after a designated period of time

Having trouble with uploading an image in Laravel using a modal?