Dynamic markdown content?

[huchenme]

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}

[johno]

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

[huchenme]

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

[johno]

Yep, you can follow along here:

• Improve inline JSX parsing #196
• JSX Assignment Expressions specification#15

[skylarmb]

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

[karlhorky]

@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 mdx-js/specification#15 (comment) 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): #470

---

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

[Nebulis]

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)

[karlhorky]

@Nebulis does adding "prettier": "prettier/prettier" to your package.json help? This will use the master version of Prettier from GitHub.

This fixed some MDX formatting problems for me:

prettier/prettier#7041 (comment)

[Nebulis]

@karlhorky yes it works by using "prettier": "prettier/prettier", will just wait for the new release to come out so.

Thanks for pointing this out 👍