Use React elements in SplitPanel

JupyterLab extensions
1

Hello,
I am trying to use a SplitPanel in an extension, which shows React elements inside. I don’t have much experience with React, and I am doing some stupid mistake. In the line p1.addWidget(w1), I get the error “Argument of type ‘Element’ is not assignable to parameter of type ‘Widget’.” Is it possible to fix the following example?

Another solution would be even better: Is it possible to use a lumino SplitPanel inside a React component?

Thank you!

import {
  Panel,
  SplitPanel,
} from '@lumino/widgets';

import React from 'react';

export class MyPanel extends SplitPanel {
  constructor() {
    super();
    this.id = 'my-split-panel';
    this.orientation = "vertical";

    let w1 = <div>Hello</div>;
    let w2 = <div>World!</div>;
    let p1 = new Panel();
    let p2 = new Panel();
    p1.addWidget(w1);
    p2.addWidget(w2);
    this.addWidget(p1);
    this.addWidget(p2);
  }
}
2

Well, I have found the solution at extension-examples/react-widget at main · jupyterlab/extension-examples · GitHub. It shows how to create a lumino widget that wraps a React component.

import {
  Panel,
  SplitPanel,
} from '@lumino/widgets';

import { ReactWidget } from '@jupyterlab/ui-components';

import React from 'react';

export class Hello extends ReactWidget {
  render(): JSX.Element {
    return <div>Hello</div>;
  }
}

export class World extends ReactWidget {
  render(): JSX.Element {
    return <div>World</div>;
  }
}

export class MyPanel extends SplitPanel {
  constructor() {
    super();
    this.id = 'my-split-panel';
    this.orientation = "vertical";
    let w1 = new Hello();
    let w2 = new World();
    let p1 = new Panel();
    let p2 = new Panel();
    p1.addWidget(w1);
    p2.addWidget(w2);
    this.addWidget(p1);
    this.addWidget(p2);
  }
}

As to my second question, I found this at the jupyterlab documentation: “We currently do not have a way of embedding Lumino widgets inside of React components. If you find yourself trying to do this, we would recommend either converting the Lumino widget to a React component or using a Lumino widget for the outer layer component.”