Converting MDX content to array for Next.js

[iliamrv]

Hello,

I try to create NextJS component for my content project.

I use this starter:

https://github.com/timlrx/tailwind-nextjs-starter-blog

which use MDX for rendering Markdown documents.

In my .md file I'd like to use the following structute:

<Proscons>
[-] cons
[-] cons
[+] pros
</Proscons>

Please help me, thanks!

I added MDX component to my NextJS project:

const Proscons = ({ ...rest }) => 
<div className="alert alert-secondary" {...rest} />
export default Proscons

I want to convert 'Proscons' content (from .md file) to a string and then convert it to array with pros and cons list as HTML UL list.

The problem that I don't know how to get content which I can convert to array.

[wooorm]

That isn’t markdown. We support markdown.
It’s not recommended to extend markdown like that. You should use JSX components, or you could perhaps abuse GFM tasklists: https://github.github.com/gfm/#task-list-items-extension-

[ChristianMurphy]

Adding on, as this is MDX and fully supports JSX.
Plain React/JSX components could be created, for <ProConList>, <Pro>, and <Con>.

<ProConList>
  <Con>lorem</Con>
  <Con>Ipsum</Con>
  <Pro>Dolore</Pro>
</ProConList>

[iliamrv]

So probably I should create custom JSX component? I need some way to convert ProConList content to string and then map it to a list.

[ChristianMurphy]

So probably I should create custom JSX component?

Yes

I need some way to convert ProConList content to string and then map it to a list.

Maybe?
It sounds a bit unnecessarily complicated, but you could.
Think back to your original ask:

pros and cons list as HTML UL list.

Think about how you would turn this into components in plain react.
If a person wanted an unordered list, with pros as items with green color (and any other CSS styling you could want to add) and cons as items with red color (and any other styles, like a different list item icon you could want to add).

It would look something like:

export function ProConList(props) {
  return <ul>{props.children}</ul>
}

export function Pro(props) {
  return <li style={{color: 'green'}}>{props.children}</li>
}

export function Con(props) {
  return <li style={{color: 'red'}}>{props.children}</li>
}

[iliamrv]

thanks a lot, I will try!