Consider I have a folder with .md files like this:

/static/blog/
  example_title.md
  another_example.md
  three_examples.md

and I have an array including all titles:

const blogEntries = ["example_title", "another_example", "three_examples"]

in my ponent I want to import all of them, notice that there could be fewer or more.

Is there any way to dynamically import them similar to:

for (let entry in blogEntries) {
  import `Markdown_${entry}` from `/static/blog/${entry}.md`
}

and later in my render I can do:

<Markdown_three_examples />

the above obviously would not work, but I'm looking for a way to achieve similar.

Consider I have a folder with .md files like this:

/static/blog/
  example_title.md
  another_example.md
  three_examples.md

and I have an array including all titles:

const blogEntries = ["example_title", "another_example", "three_examples"]

in my ponent I want to import all of them, notice that there could be fewer or more.

Is there any way to dynamically import them similar to:

for (let entry in blogEntries) {
  import `Markdown_${entry}` from `/static/blog/${entry}.md`
}

and later in my render I can do:

<Markdown_three_examples />

the above obviously would not work, but I'm looking for a way to achieve similar.

• javascript
• reactjs
• ecmascript-6

• When you build a react app, all your import / export stuff is converted into one big js file. There's no way to import stuff dynamically because babel can't build that into its file. The solution is to build a Markdown ponent and fetch() the md file from the server when it has mounted. – user5734311 Commented Oct 23, 2018 at 19:30
• @ChrisG can you give an example as answer? – supersize Commented Oct 23, 2018 at 19:39
• What part do you need help with? In ponentDidMount(), use fetch() to load the Markdown file. Set its content as part of your state so it gets rendered. Implement the loop by rendering multiple ponents, using your file array and map(). – user5734311 Commented Oct 23, 2018 at 20:02
• Two people have now suggested using import(), which is not required to do this at all, and imo takes the question strictly at face value while ignoring the bigger picture. Here's my take: codesandbox.io/s/l2jlq3j78m – user5734311 Commented Oct 23, 2018 at 20:20

3 Answers 3

You can try to use dynamic imports - import(). As the name implies, they work during runtime, and can have dynamic urls.

Note: currently they are supported natively by Chrome and Safari, but not by firefox, IE, and Edge. However, you can use webpack to solve that.

const blogEntries = ["example_title", "another_example", "three_examples"]

const loadEntries = (entries) =>
  Promise.all(entries.map((entry) => import(`/static/blog/${entry}.md`)));

loadEntries(blogEntries)
  .then((entries) => console.log(entries));

const Markdown = {}

for (let entry in blogEntries) {
  Markdown[entry] = require(`/static/blog/${entry}.md`)
}

Take a look at the following link. It's essentially used the external library - marked, fetching the content, then rendering the content to the screen. Essentially, you can call multiple fetches for each file needed and render the content dynamically.

How do I load a markdown file into a react ponent?

Note: There is a proposal in the ECMAScript standard for a dynamic import. You can read more about this here: https://developers.google./web/updates/2017/11/dynamic-import