# React p5: So how do you pass a value generated in p5 back to a React component?

**URL:** <https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978>\
**Category:** Libraries\
**Created:** [October 28, 2020, 4:16pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978 "2020-10-28T16:16:27Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![venn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/venn/32/5430_2.png) [@venn](https://discourse.processing.org/u/venn)\
**Post date:** [October 28, 2020, 4:16pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/1 "2020-10-28T16:16:27Z")

</div>

Hi there, so I’m using [https://github.com/and-who/react-p5-wrapper](https://github.com/and-who/react-p5-wrapper)

I’m wondering if there’s a way to pass a value from the p5 Sketch file back into React? For example. I want to keep track of the **label** value generated in p5 Sketch and use that somewhere later. How can I store that value globally?

```auto
export default function sketch(p5) {

    function modelReady() {
        console.log("Model is ready!!!")
        mobilenet.predict(gotResults)
    }

    function gotResults(error, results) {
        if (error) {
            console.error(error)
        } else {
            **label = results[0].label**
            mobilenet.predict(gotResults)
        }
    }

```

The thing that I’m building [https://codesandbox.io/s/dark-wave-dgrlg](https://codesandbox.io/s/dark-wave-dgrlg) (it’s a machine learning cam that will detect what the camera is seeing) ~~As you can see the label is updating in the p5 sketch but not the React component itself.~~

**My fix:** I have done something like `setInterval(setLabel, 0)` in my code but that doesn’t seem to be the correct pattern? Is there a better way?

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [May 12, 2021, 10:20am UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/2 "2021-05-12T10:20:26Z")

</div>

Hello, have you find a solution for your problem ? Because I have a same need, catch data from P5 to React.

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 12, 2021, 5:04pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/3 "2021-05-12T17:04:10Z")

</div>

I don’t use react but when I work with other frameworks, I attach a callback to the p5 object after instantiation

```javascript
let myp5 = new p5(s);
myp5.reactCallback = (label) => {
  ...
}

```

this function will be accessible as

```javascript
const s = ( sketch ) => {
  sketch.setup = () => {
    sketch.reactCallback(...);
  };
};

```

I think this is a general strategy but I haven’t tested it and not sure if it works in your case.

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [May 12, 2021, 7:10pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/4 "2021-05-12T19:10:55Z")

</div>

Perfect, I try that tomorrow. I give the feedback. Thx for the trick. I begin on React, Javascript and on P5.JS… so there is a lot of stuff to understand in same time :).

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [May 13, 2021, 7:20am UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/5 "2021-05-13T07:20:10Z")

</div>

Hmmm @micuat I try to create a code to make your idea in application, but I cannot figure how to code it. With `react` the idea is use `component` But I don’t find idea to export the argument from the `sketch` maybe need use `useState()` or `useContext()` but my React knowledge is too weak. Below my try to understand how do that ?

script:

```auto
import React from 'react';
import P5Wrapper from './P5Wrapper';

export default function () {
  return (
    <div>
      <div style={{ position: 'absolute' }}>
        <P5Wrapper sketch={my_sketch} data={props.label}/>
      </div>
      <div>
        {/* GOAL : catch data from my_sketch to pass to other script */}
      </div>
    </div>
  );
}

function my_sketch(p) {
  let data = null;
  p.setup = function () {
    p.createCanvas(p.windowWidth, p.windowHeight);
    p.windowResized = () => {
      p.resizeCanvas(p.windowWidth, p.windowHeight);
    };
  };

  p.draw = function () {
    // my code
  };

  p.callback = function () {
    // my code
  };

  p.set_data = function (props) {
    if (props.data) {
      data = props.data;
    }
  };

  p.callback = function () {
    // these callback need to send data to all component
    // need to pass react State and use useState() ?
    // need to use useContext() ? 
    // but how ??????
  };
}

```

component wrapper

```auto
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
import p5 from 'p5';

const P5Wrapper = props => {
  let canvas = null;
  function set_data() {}
  function callback() {}
  const sketch_ref = useRef();

  useEffect(() => {
    canvas = new p5(props.sketch, sketch_ref.current);
    if (canvas.set_data) {
      canvas.set_data(props);
    }
    if (canvas.callback) {
      canvas.callback(props);
    }
  }, []);
  return <div ref={sketch_ref} />;
};

P5Wrapper.propTypes = {
  sketch: PropTypes.func.isRequired,
};

export default P5Wrapper;

```

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [May 13, 2021, 9:14am UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/6 "2021-05-13T09:14:19Z")

</div>

I see. As I wrote I don’t use React (I only have a bit of experience in vue and I mostly use [choo.io](http://choo.io) for fun) and I know that this forum is not so web-front-end framework oriented so maybe contacting the author of the library would be quicker. Also in their README they explain a handler:

> **[and-who/react-p5-wrapper - Properties](https://github.com/and-who/react-p5-wrapper#properties)**
>
> Contribute to and-who/react-p5-wrapper development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![Stanlepunk](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/stanlepunk/32/11509_2.png) [@Stanlepunk](https://discourse.processing.org/u/Stanlepunk)\
**Post date:** [May 13, 2021, 1:45pm UTC](https://discourse.processing.org/t/react-p5-so-how-do-you-pass-a-value-generated-in-p5-back-to-a-react-component/24978/7 "2021-05-13T13:45:02Z")

</div>

No roblem… I just use the same name P5Wrapper. But `and-who` library don’t provide to opportunity to dialogue between React and P5.JS. An other guy [GitHub - atorov/react-hooks-p5js](https://github.com/atorov/react-hooks-p5js) make something cool, and maybe it’s possible with his code but… it’s just a nightmare to understand the code ☹ But I’m pretty sure to find the solution with useState() and useContext(). If I found it ; I post it !