How to pass data from vanilla JavaScript to React functional component

Question

I'm trying to update (setState) a React functional component from within "regular" (vanilla) JavaScript.

I searched through StackOverflow but all the answers deal with passing data from React to (vanilla) JavaScript, and not the other way around.

Let's take the example from the docs :

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

To render it in JavaScript, I do:

let example = ReactDOM.render(
    <Example />,
    document.getElementById('example-wrapper')
);

Now suppose I want to manually update the count from the vanilla JavaScript code, outside of react. Like:

function updateExampleCount(newCount) {
    example.setCount(newCount);   // ???
}

I can't access the component state, as setCount is a private variable inside the function, and example returned from render is null .

If I use a class component, then render returns a reference to the component and then I can call example.setState . But I prefer not to convert my component into a class if I can avoid it.

The docs for render say :

Render a React element into the DOM in the supplied container and return a reference to the component (or returns null for stateless components).

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 render , is there another way to "get" the component and then use setCount (or some other way to set the state)?

Or do I just have to use a class component for this?

Thanks.

Answer 1

There is no way to access the state from outside the component. It's like trying to access a locally scoped variable from outside a function.

Using a class component wouldn't help either since you wouldn't be able to get hold of the instance of the class created inside the React app.

---

If you want to trigger a state change from outside the application, then the application needs to provide an event handler.

For (a really quick and dirty) example:

const outside = {
    value: 2,
    callbacks: [],
    addCallback: function (callback) { this.callbacks.push(callback); },
    setValue: function (value) { 
        this.value = value; 
        this.callbacks.forEach(
            callback => callback(this.value)
        );
    }
};

function Component = () => {
    const [val, setVal] = useState(outside.value);
    useEffect(() => {
        outside.addCallback((value) => setVal(value));
    }, []);
    return <p>{val}</p>
}

Answer 2

It is possible. You could pass your setCount function as a parameter to use it in your JS outside of React - but I would not really recommend this.

I would recommend that you keep your business logic and React logic separate.

The only things that need to be aware of state and will be using it are React components themselves. I would structure your code in a way that it is not coupled to React, and does not have to use or depend on React state in any way.

This is easier said than done at the beginning. If you need help with it, maybe provide a use case that you are trying to solve in this way, and a better answer might be provided.

Answer 3

It can be done by extending Example so it will pass a reference to the setCount function back to the parent code, see below. (This might be the same as what Oli mentioned, if so then I had the same idea and made a working implementation before answering)

 const { useState } = React; // functionFromComponent will store the function from Example. let functionFromComponent = undefined; const setter = (someFn) => functionFromComponent = someFn; const Example = ({ setFunction }) => { // take `setFunction` from props const [count, setCount] = useState(0); setFunction(setCount); // pass setCount to the parent code return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); } ReactDOM.render( <Example setFunction={setter} />, document.getElementById('example-wrapper') ); function buttonClicked() { if (functionFromComponent) { functionFromComponent(777); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="example-wrapper"></div> <button id="regularButton" onclick="buttonClicked()">Regular button</button>