Is storing JSX.Elements in an observable supported?

[johnmcconnell]

Example

Observable data storing a JSX element

class ObservableData {
  component: JSX.Element
 }

React component using observable data

const DynamicRendering = observer(() => {
  const observableData = useContext(MyObservableContext);
  return (
    <div> {observableData.component} </div>
   );
 });

Is this supported? Good idea, bad idea? Any suggestions welcome

[johnmcconnell]

Maybe portals are a better solution here: https://stackoverflow.com/questions/61113318/is-it-a-misuse-of-context-to-use-it-to-store-jsx-components-for-display-elsewher ?

Maybe both are fine

[urugator]

You can store a reference to an element, but you should treat the element itself as immutable and mark the field as observable.ref.

It's usually better to store react's ref object instead of the element directly. Otherwise make sure to pass a callback to ref={el => store.el = el}.

Don't call it component. Component is a function/class, element is an object.