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.

I'd say this is a feature, not a bug. A component is responsible itself for its state, and its state is only changed from within, making the code easier to understand and reason about. Pass the count as a prop instead if you want to set it from outside. — Bergi
– Bergi, Commented Dec 27, 2021 at 10:00
Where and how do you want to call updateExampleCount? And how many Examples will you render in a page, only a single one? — Bergi
– Bergi, Commented Dec 27, 2021 at 10:02

Quentin · Accepted Answer · 2021-12-27 10:01:26Z

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>
}

Oli · Accepted Answer · 2021-12-27 10:03:59Z

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.

answered Dec 27, 2021 at 10:03

Oli

8727 silver badges13 bronze badges

1 Comment

Arnon Yaari Over a year ago

The use case is for displaying, and then editing, tags. I have a page that represents some item, say, a holiday gift that users can buy, and the user can add tags to the item like "cool gift", "holiday", "nice idea" etc. The entire code exists and is written in pure JavaScript. I want to slowly convert it to React. I created a React component that only displays the tags, and its "state" is the list of tags to display. But editing the tags is done in an entirely different place in pure JS. I want to do component.setState({tags: newTags}) (in pure JS) but I can't.

Peter B · Accepted Answer · 2021-12-27 10:40:10Z

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>

Collectives™ on Stack Overflow

How to pass data from vanilla JavaScript to React functional component

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related