dynamic update component in playground?

Is it possible to dynamic update a component in Playground?

Description I would like to have a working example in the Playground. In my case I have a toggle component and I want to change the status of the selection when the user clicks the component

name: UIToggle
menu: Components

import { Playground, PropsTable } from 'docz'
import UIToggle  from './index.js'
let isToggled = true;
const _onToggleStateChange = () => {
  console.log(isToggled);
  isToggled = !isToggled;
}

# UIToggle

Hello, I'm still a mdx file, but now I have a button component!


<PropsTable of={UIToggle} />

<Playground>
    <UIToggle isToggled={isToggled} onToggle={ _onToggleStateChange } ></UIToggle>
</Playground>

This is my code. The variable isToggled is updated when the user clicks, but the components don’t receive any update.

[rakannimer]

I used react-component-component to create local state on the page and update it.

Example

Code

So in your case it would be :

import Component from "react-component-component";
<Playground>
  <Component initialState={{ isToggled: false }}>
    {component => {
      return (
        <UIToggle
          isToggled={component.state.isToggled}
          onToggle={() => {
            component.setState(state => ({ isToggled: !state.isToggled }));
          }}
        />
      );
    }}
  </Component>
</Playground>;

Hope that helps !

[dotlouis]

This would help being documented. I searched for quite some time before getting here.