CODEWITHSUNDEEP
javascriptreactjsreact-styleguidist
userlkjsflkdsvm
userlkjsflkdsvm

Reputation: 983

How to render two components inside a .md file for styleguidist in React?

I am trying to create a styleguide with custom components. I need to be able to insert components inside of each other and not sure how to do that inside of the .md file. I have a list and list items. I want to display the list items inside of the list. Getting this error in the styleguidist display. Here are some good examples but none that illustrate what I am trying to accomplish -- https://github.com/styleguidist/react-styleguidist/tree/master/examples/basic/src/components

SyntaxError: Unexpected token (3:0) 1 : import ListItem from './ListItem' 2 : 3 :

List.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class List extends Component<IListProps> {
      render() {
        const { children } = this.props
        return <ul className={'mtm-list'}>{children}</ul>
      }
    }

    export default List

List.md


    ```js
    import ListItem from './ListItem'

    <List>
       <ListItem> 
           Content in a List
       </ListItem>
    </List>

ListItem.tsx


    import React, { Component } from 'react'
    import './List.css'

    export interface IListItemProps {
      /** Type of button to display */
      font: string;
      disabled: boolean;
      mtmClass: string;
      link: boolean;
    }

    class ListItem extends Component<IListItemProps> {
      render() {
        const { children } = this.props
        return <li className={'mtm-list-item'}>{children}</li>
      }
    }

    export default ListItem

Upvotes: 4

Views: 1492

Answers (2)

userlkjsflkdsvm
userlkjsflkdsvm

Reputation: 983

I had to change the .md to this format and it worked, specifically adding the semicolon. 

```jsx
import React from 'react'
import Button from 'rsg-example/components/Button'
import Placeholder from 'rsg-example/components/Placeholder'
;<Button>
  <Placeholder />
</Button>
```

Upvotes: 3

omega-nitro-zeus-x0
omega-nitro-zeus-x0

Reputation: 479

Maybe MDX helpful.

"MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents"

yarn add mdx.macro

rename List.md to List.mdx and now you can something like this

    import ListItem from './ListItem'
#Header
    <List>
       <ListItem> 
           *content*
       </ListItem>
    </List>

Upvotes: 2

Related Questions