title: How to set zustand state in a class component
body: <p>I am working on a site that has a piece a global state stored in a file using <a href="https://github.com/pmndrs/zustand" rel="noreferrer">zustand</a>. I need to be able to set that state in a class component. I am able to set the state in a functional component using hooks but I'm wondering if there is a way to use zustand with class components.</p>
  <p>I've created a sandbox for this issue if that's helpful:
  <a href="https://codesandbox.io/s/crazy-darkness-0ttzd" rel="noreferrer">https://codesandbox.io/s/crazy-darkness-0ttzd</a></p>
  <p>here I'm setting state in a functional component:</p>
  <pre><code>function MyFunction() {
    const { setPink } = useStore();
  
    return (
      &lt;div&gt;
        &lt;button onClick={setPink}&gt;Set State Function&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>my state is stored here:</p>
  <pre><code>export const useStore = create((set) =&gt; ({
    isPink: false,
    setPink: () =&gt; set((state) =&gt; ({ isPink: !state.isPink }))
  }));
  </code></pre>
  <p>how can I set state here in a class componet?:</p>
  <pre><code>class MyClass extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;button
            onClick={
              {
                /* setPink */
              }
            }
          &gt;
            Set State Class
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>