How to Dynamically Load Markdown Files in React (markdown-to-jsx)
Tags: react, webdev, markdown
Published: 2021-05-07 14:28:10

### <center>How to Dynamically Load Markdown Files in React (markdown-to-jsx)</center>

------------

![rjs-markdown-dynamic-files](https://user-images.githubusercontent.com/83028597/116830852-24ff4100-ab7a-11eb-90c5-cd7f84f6a906.png)

### I was fussing about how to display copy in one of my React components.

Instead of dealing with HTML **divs**, **paragraphs**, **images**, **tables**, etc.

I found a way to just import the **.md** (***markdown***) files I already have.

This process involves:
* [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx "markdown-to_jsx")
* light knowledge of React state management & life-cycles; we'll use **hooks** here
* light knowledge of the JavaScript **Fetch API** (very light knowledge, don't worry)

------------

### The first thing we'll need is to organize the markdown files.

I've chosen to store the **.md** files in a ***markdown*** folder in the **src** directory.

<br />

![markdown-folder](https://user-images.githubusercontent.com/83028597/116830921-86bfab00-ab7a-11eb-871a-0b9932de41b7.png)

<br />

------------

### Here is the code that brings everything together.

Here is the code I'll be explaining:

```
// App.js

import React, { useState, useEffect } from 'react';

import Markdown from 'markdown-to-jsx';

import './styles/main_styles.css';

function App() {
	const file_name = 'react_pinterest_clone.md';
	const [post, setPost] = useState('');

	useEffect(() => {
		import(`./markdown/${file_name}`)
			.then(res => {
				fetch(res.default)
					.then(res => res.text())
					.then(res => setPost(res))
					.catch(err => console.log(err));
			})
			.catch(err => console.log(err));
	});

	return (
		<div className="container">
			<Markdown>
				{post}
			</Markdown>
		</div>
	);
}

export default App;
```

#### There are 3 key things happening here:
1. Import the **markdown-to-jsx** package.
2. Setup the state.
3. Fetch and display the markdown.

<br />

**Firstly**, we need to of course import the **markdown-to-jsx** package.

We use it in our return block.

**Secondly**, we set up the state we'll use to hold the **.md** data. Initially, we set the variable **post** to a ***blank string*** and place it in between the **Markdown** tags.

We also have a **file_name** to act as a way of dynamically choosing the markdown file we want. In this case
I hard-coded it, but you can set it to whatever you want based on some logic.

**Thirdly**, once our component loads, **useEffect()**, we use the **import** as a function.

The **import** used this way acts as a ***promise*** and returns the absolute path to our markdown file.

We then fetch the **markdown** file we want using the **Fetch API**.

Once we fetch the file, we need to parse the response as a **text** file, and then store the parsed response in our **post** state variable.

------------

### It's as simple as that.

You can get the source files [here](https://github.com/an-object-is-a/reactjs-markdown-dynamic-file "here").

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

#### <center>Be sure to follow us on [Instagram](https://www.instagram.com/an_object_is_a/ "Instagram") and [Twitter](https://twitter.com/anobjectisa1 "Twitter") to keep up with our latest Web Development tutorials.</center>

### <center>Dynamically Load Markdown files into React for your Blog | markdown-to-jsx</center>

{% youtube qdTisPssu24 %}