Docz: Writing a function in mdx

[sridhar-v9]

Question

Is it possible to write a function in side mdx ( tried because its support jsx in mdx)
Description
Give more information about your doubt

Like i tried to bind a function to click event of a button . How i can write that function inside MDX any example is helpful

[danielbayerlein]

Example with a React component

<Playground>
  {class Example extends React.Component {
    constructor (props) {
      super(props)

      this.state = { show: false }
    }

    handleClick () {
      this.setState({ show: true })
    }

    render () {
      return (
        <React.Fragment>
          {this.state.show &&
            <div>
              <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
                sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
                At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
                consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
                sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
                no sea takimata sanctus est Lorem ipsum dolor sit amet.
              </p>
            </div>
          }
          <button onClick={() => this.handleClick()}>Show</button>
        </React.Fragment>
      )
    }
  }}
</Playground>

Example with a JS function

<Playground>
  {() => {
    console.log('docz')
  }}
</Playground>

I hope it helps you.

[sridhar-v9]

Thank you for providing quick example... it really helps