How to use React and React hooks with @mdx-js/mdx?

[zfben]

I put below code to https://mdxjs.com/playground/, but it doesn't work.

import { useState } from 'react'

export const MyDynamicButton = () => {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>Clicked {count} times!</button>
  )
}

Click it! <MyDynamicButton />

Then I try to replace from 'react' with from 'https://esm.sh/react', the react hooks failed.

How should I do to make it works? (just use @mdx-js/mdx)

[wooorm]

How should I do to make it works? (just use @mdx-js/mdx)

That works. You can use that fine “in React”.

But not on our playground.

The reason is that the website has a packaged version of React, which renders the result of the playground. And you include a different React from within the MDX “file”. Both work fine, until React notices a different React. And React doesn’t support that.

[zfben]

How can I use the packaged version of React?
The reason I import another React is I don't know how to use the React that the playground included.

[wooorm]

That works. [...] But not on our playground.

[zfben]

I follow the guide https://mdxjs.com/guides/mdx-on-demand/, but it can't use React and React hooks, could you give some examples to use React hooks with @mdx-js/mdx?

[wooorm]

You can use it everywhere that is not the playground

You cannot use it inside the playground.