Updating a React state from an embedded Observable notebook.

Community Help
1

Hello!

I’m trying to build an interactive map that holds states of different information. I’m using React and the Observable Runtime API.

I’m importing the cell to the page using this embedding snippet from Observable:

import React, {useRef, useEffect} from "react";
import {Runtime, Inspector} from "@observablehq/runtime";
import notebook from "**mynotebooklocation**";

function Notebook() {
  const ref = useRef();
 
  useEffect(() => {
const map = new Runtime().module(notebook, (name) => {
  if (name === "chart")
    return Inspector.into(ref.current.querySelector(".chart"))();
  }, []);

  return (
    <div className="Notebook" ref={ref}>
      <div className="chart"></div>
    </div>
  );
}

export default Notebook;

I ingest my local state to the map with redefine:
map.redefine(“seatObject”, seatsStatus); // update map with current state

I have mouse events (click, hover) on the map (observable notebook) that change the Observable state and I want that object to be sent back to the react app.

My question is this - what is the best way to get the embedded notebook and the react app to communicate back and forth – sending data from the notebook to the app on mouse events. (like a reverse redefine if you will).

appreciate the help.

1 Like
2

hi @itayniv have you looked at this react-dataflow example?

it shows really nicely how to two-way bind your observable notebook to your react application

1 Like
3

Thanks for the reference. I didn’t know these existed.
Checking it out right now.

4

This worked perfectly.
I eventually changed my cell(map) to be a viewof cell so it would update a value to be injected in the react app.
:call_me_hand:t2:

1 Like