Mdx: Dynamic markdown content?

Created on 1 Feb 2019 · 8Comments · Source: mdx-js/mdx

It will be nice if markdown content could be dynamic

const firstName = 'John'
const lastName = 'Dow'
const address = 'address'

# Hello {firstName} {lastName}

## My address is {address}

Source

huchenme

Most helpful comment

Dynamic markdown is accessible as soon as a JSX block is opened. This includes inline JSX blocks, so you can do the following.

export const firstName = 'John'
export const lastName = 'Dow'
export const address = 'address'

# Hello <span children={firstName} /> <span children={lastName} />

<div>My address is {address}</div>

You can also access props

<pre>{JSON.stringify(props, null, 2)}</pre>

Eventually there will also be React.Fragment shorthands (currently under development):

# Hello, <>{props.name}</>

johno on 6 Feb 2019

🎉2

All 8 comments

Dynamic markdown is accessible as soon as a JSX block is opened. This includes inline JSX blocks, so you can do the following.

export const firstName = 'John'
export const lastName = 'Dow'
export const address = 'address'

# Hello <span children={firstName} /> <span children={lastName} />

<div>My address is {address}</div>

You can also access props

<pre>{JSON.stringify(props, null, 2)}</pre>

Eventually there will also be React.Fragment shorthands (currently under development):

# Hello, <>{props.name}</>

johno on 6 Feb 2019

🎉2

Thanks @johno, could you link the issue of React.Fragment for tracking purpose? I am excited about that

huchenme on 11 Feb 2019

Yep, you can follow along here:

johno on 11 Feb 2019

For future googlers since this is the top result, currently this works for me:

Hello <React.Fragment children={props.name} />, nice to meet you

These do not work even though they are theoretically the same thing

Hello <React.Fragment>{props.name}</React.Fragment>, nice to meet you

Hello <>{props.name}</>, nice to meet you

skylarmb on 10 Mar 2020

👍1

@skylarmb what version of @mdx-js/mdx are you using? Or if you're using a different library, which library and which version?

@johno mentioned in https://github.com/mdx-js/specification/issues/15#issuecomment-471368432 that your third example should work since v1 Alpha:

Hello <>{props.name}</>, nice to meet you

Seems like it was probably this pull request (landed in v1.0.0-alpha.9): https://github.com/mdx-js/mdx/pull/470

If it really is a problem, it may be worth it to submit a new issue, since this is supposed to work.

karlhorky on 11 Mar 2020

Hi,

We face the issue as well with <></> syntax while using React.Fragment is fine.

<Preview>
  <Story name="AddressSingle">
    <AddressSingle title="Holder" name="Bank of China" address="0x28F7aB32C521D13F2E6980d072Ca7CA493020145">
      <>
        <ButtonSolid color="white" isIcon={true}>
          Some
        </ButtonSolid>
      </>
    </AddressSingle>
  </Story>
</Preview>

Error thrown by prettier is:

SyntaxError: Unexpected character ">" (8:9)
   6 | 
   7 | <Meta title="Document Info/AddressSingle" component={AddressSingle} />
>  8 | 
     | ^
   9 | # AddressSingle
  10 | 
  11 | Address Single.
    at oc (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:20:43697)
    at Pc (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:132:1736)
    at e (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:132:4098)
    at Object.parse (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:132:4955)
    at /home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:132:5845
    at e (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:20:23192)
    at /home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:20:23321
    at Array.reduce (<anonymous>)
    at e (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:20:23291)
    at mapAst (/home/nebulis/IdeaProjects/tradetrust-website/node_modules/prettier/parser-markdown.js:20:23405)
Process finished with exit code -1

The error point to line 8, while the fragment from the code I shared is located line 22.

We use [email protected] and @mdx-js/[email protected].

I can re-try tomorrow (it's late where I live) and open an issue if I am able to reproduce with a simpler example using mdx only (maybe it's a prettier issue also)