Local variables derived from props

[glitteringkatie]

Heyo! I was working with our writers and came across a scenario where they wanted to set a variable based on props passed. It looked something like the following:

document.mdx

import Snippet from '../snippet.mdx'

<Snippet feature="classic" />

snippet.mdx

export const isClassic = props.feature === 'classic'

## All about {props.feature}

Paragraph

{isClassic ? 'More about this concept' : 'Whatever'}

Specifically export const isClassic = props.feature === 'classic' kept giving me errors (I tried many different orderings of using curly braces). I was surprised! I thought surely this should work.

Is this expected behavior?

Do you have a suggestion for when people want to do something like this? My best suggestion was passing two props: <Snippet feature="classic" isClassic={true} />.

[ChristianMurphy]

Heya @glitteringkatie 👋

Is this expected behavior?

It is.

illustrative example

exports in MDX are available outside the component.
An example which illustrates this:

export const isClassic = true;

## All about {props.feature}

Paragraph

{isClassic ? 'More about this concept' : 'Whatever'}

is compiled to

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
const isClassic = true;
function _createMdxContent(props) {
  const _components = Object.assign({
    h2: "h2",
    p: "p"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsxs(_components.h2, {
      children: ["All about ", props.feature]
    }), "\n", _jsx(_components.p, {
      children: "Paragraph"
    }), "\n", isClassic ? 'More about this concept' : 'Whatever']
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  isClassic,
  default: MDXContent
};

📓 note that props exists inside MDXContent and _createMdxContent, but isClassic is at a top level, because it is exported.

---

Some alternatives

IIFEs

Using an IIFE inside a JSX expression.

## All about {props.feature}

Paragraph

{(() => {
  const isClassic = props.feature === 'classic'
  return isClassic ? 'More about this concept' : 'Whatever'
})()}

Sequence expressions and global variables

📓 this does not allow using var, let, or const, it will always be assigned to a global. ⚠️

## All about {props.feature}

Paragraph

{ isClassic = props.feature === 'classic',  isClassic ? 'More about this concept' : 'Whatever' }

[glitteringkatie]

Thanks for this insight! I'll pass along the suggestions.