title: How to pass data from vanilla JavaScript to React functional component
body: <p>I'm trying to update (setState) a React functional component from within &quot;regular&quot; (vanilla) JavaScript.</p>
  <p>I searched through StackOverflow but all the answers deal with passing data from React to (vanilla) JavaScript, and not the other way around.</p>
  <p>Let's take the example from the <a href="https://reactjs.org/docs/hooks-state.html" rel="nofollow noreferrer">docs</a>:</p>
  <pre><code>import React, { useState } from 'react';
  
  function Example() {
    // Declare a new state variable, which we'll call &quot;count&quot;
    const [count, setCount] = useState(0);
  
    return (
      &lt;div&gt;
        &lt;p&gt;You clicked {count} times&lt;/p&gt;
        &lt;button onClick={() =&gt; setCount(count + 1)}&gt;
          Click me
        &lt;/button&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>To render it in JavaScript, I do:</p>
  <pre><code>let example = ReactDOM.render(
      &lt;Example /&gt;,
      document.getElementById('example-wrapper')
  );
  </code></pre>
  <p>Now suppose I want to <em>manually</em> update the count from the vanilla JavaScript code, outside of react. Like:</p>
  <pre><code>function updateExampleCount(newCount) {
      example.setCount(newCount);   // ???
  }
  </code></pre>
  <p>I can't access the component state, as setCount is a private variable inside the function, and <code>example</code> returned from <code>render</code> is <code>null</code>.</p>
  <p>If I use a class component, then <code>render</code> returns a reference to the component and then I can call <code>example.setState</code>. But I prefer not to convert my component into a class if I can avoid it.</p>
  <p>The docs for <code>render</code> <a href="https://reactjs.org/docs/react-dom.html" rel="nofollow noreferrer">say</a>:</p>
  <blockquote>
  <p>Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).</p>
  </blockquote>
  <p>But my component does have a state (count), it just doesn't recognize it.
  If it's not possible to use the return value from <code>render</code>, is there another way to &quot;get&quot; the component and then use setCount (or some other way to set the state)?</p>
  <p>Or do I just have to use a class component for this?</p>
  <p>Thanks.</p>