Passing complex content into a react component into an mdx document.

Not sure where on the internet to ask this, so I figured I would start where it’s trying to be done and see of anybody here has any ideas or resources to lead me towards. I’m desiring to make react components that can be used in mdx documents where I can feed them content like the following, which is sort of a simple YAML like syntax.

<PracticeSchedule>
  Week 1: 
    Day 1:
      Play all 12 notes, starting with the note C
    Day 2:
      Play all 12 notes, starting with the note G
    Day 3:
      Play all 12 notes, starting with the note D
    Day 4:
      Play all 12 notes, starting with the note A
    Day 5:
      Play all 12 notes, starting with the note E
    Day 6:
      Play all 12 notes, starting with the note B
    Day 7:
      Rest
  Week 2: 
    Day 1:
      Play all 12 notes, starting with the note F#/Gb
    Day 2:
      Play all 12 notes, starting with the note C#/Db
    Day 3:
      Play all 12 notes, starting with the note G#/Ab
    Day 4:
      Play all 12 notes, starting with the note D#/Eb
    Day 5:
      Play all 12notes, starting with the note A#/Bb
    Day 6:
      Play all 12 notes, starting with the note F
    Day 7:
      Rest
</PracticeSchedule>

The preceding would be the desired author experience for a react component I’m working on that is a practice schedule for piano. I originally made a version of this in vanilla HTML and CSS and I tried tables and lists then but they didn’t quite work for me in the styling department for various reasons, so I ended up making a series of divs with custom styling that ended up doing the job, but was all hand coded. So I desire to turn all that mess into a react component and feed it data in the preceeding manner, or something similar, that is keeping with the spirit of Markdown/YAML/MDX. I suppose I could feed the components props of arrays and objects filled with strings, but I would like to be able to keep the simple YAML/Markdown feel, even inside an instance of a react component. Does anybody know if something like this is even possible to do, and if so, would it be too much time/effort/trouble to implement?

[ChristopherBiscardi]

if you go the child manipulation route, you could also use something likejsYaml in the react component itself to parse children from a string. It’d require the `` syntax for strings though.

<PracticeSchedule>{`
Week 1: 
  Day 1:
}`</PracticeSchedule>

[johno]

This isn’t very easy to achieve right now since MDX doesn’t support embedding MD syntax inside JSX blocks. However, you can achieve something similar by breaking out the PracticeSchedule content into its own file:

index.mdx

import Content from './some-content.mdx'

# Hello, world!

<Content />

some-content.mdx

import styled from 'styled-components'

export default styled.div`
  & ul {
    color: tomato;
  }
  & ul ul {
    color: rebeccapurple;
  }
`

- Item one
  - Item one a
  - Item one b
- Item two
  - Item two a
  - Item two b

Then, in some-content.mdx you could import PracticeSchedule and export it as the default.

You could also manipulate the children passed to PracticeSchedule since it will just be a string, but the newline information for your syntax will be lost because JSX, similarly to HTML (or at least most tags/elements), isn’t whitespace sensitive.