nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Problem Implementing MutableStoreManager

ChrisCarter3

Hoping someone can help me figure out what I'm doing wrong. I've been struggling to figure this out all week.

I'm trying to pass complex objects (in this case an Extent) between widgets.

In the sender widget, I'm using this:

MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext);

And the receiving widget has this in the mapExtraStateProps function:

const newSearchExtent = props?.mutableStateProps?.searchExtent;

But it always comes back as undefined.

Has anyone successfully passed complex JavaScript objects between widgets?

Find more posts tagged with

Accepted answers

Jeff.Thompson@arlingtontx.gov_arlingtontx

Your syntax looks ok. The ? after props is unnecessary, but I don't think it will make a difference.

//Will not error
const newSearchExtent = props.mutableStateProps?.searchExtent;

I assume id in MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext); is passing a string value like 'widget_7' where 7 is the correct id number of the receiving widget.

Confirm that ext in the sending widget is correctly defined.

I suspect the problem is that the message is being sent multiple times because of re-renders and you are only catching an undefined instance. What happens if you try to read your message in a useEffect() function?

useEffect(() => {
   console.log(props.mutableStateProps?.searchExtent)
}, [props.mutableStateProps?.searchExtent])

All comments

ChrisCarter3

Thank you, this helped me figure out that I was passing the id of the sending widget, not the receiving widget. Once I fixed that, it worked. For whatever reason, passing simple objects via widgetStatePropChange doesn't seem to care about which widget ID you use.

TimWestern

@ChrisCarter3 wrote:
Hoping someone can help me figure out what I'm doing wrong. I've been struggling to figure this out all week.
I'm trying to pass complex objects (in this case an Extent) between widgets.
In the sender widget, I'm using this:
MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext);

And the receiving widget has this in the mapExtraStateProps function:
const newSearchExtent = props?.mutableStateProps?.searchExtent;

But it always comes back as undefined.

Has anyone successfully passed complex JavaScript objects between widgets?

passed complex JavaScript objects between widgets

This is a question i find my self asking periodically, because when you build a tsx file and then use it in another you are technically passing data between them. The two caveats you have to watch out for are the following:

Props are defined from the highest component on down. If you update something inside a widget, but don't use a callback or event handler that is defined on the parent and passed into the child the parent props may not know about it. Otherwise it is possible the parent might not be aware.

Below is a very generic example of what this may look like.

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState('initial data');

  const handleDataChange = (newData) => {
    setData(newData);
  };

  return (
    <div>
      <ChildComponent data={data} onDataChange={handleDataChange} />
    </div>
  );
}

export default ParentComponent;

// ChildComponent.js
import React from 'react';

function ChildComponent({ data, onDataChange }) {
  const handleClick = () => {
    // Modify the data
    const newData = 'modified data';
    
    // Call the callback function to pass the modified data to the parent
    onDataChange(newData);
  };

  return (
    <div>
      <button onClick={handleClick}>Modify Data</button>
    </div>
  );
}

export default ChildComponent;

State does not necessarily have a guarantee on when it is correct. I find I often have to add a check to see if something is loaded, before other processes can handle and render output. In functional components you may need a useEffect to manage when these update too.

Jeff.Thompson@arlingtontx.gov_arlingtontx

Your syntax looks ok. The ? after props is unnecessary, but I don't think it will make a difference.

//Will not error
const newSearchExtent = props.mutableStateProps?.searchExtent;

I assume id in MutableStoreManager.getInstance().updateStateValue(id, 'searchExtent', ext); is passing a string value like 'widget_7' where 7 is the correct id number of the receiving widget.

Confirm that ext in the sending widget is correctly defined.

useEffect(() => {
   console.log(props.mutableStateProps?.searchExtent)
}, [props.mutableStateProps?.searchExtent])

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.