React 19 & ExB

LefterisKoumis

This page is titled "Use Map Components (React 19 + Web Components)" and it provides instructions to download the SDK to a new folder on your ExB development environment called "web-component-widgets/use-web-components-19". React JS 19 uses functional components. Under the "Contents" version it states:

The issue I see is that at the SDK location it still uses class components. For example, the "add-layers" sample it states that it was updated to version 1.19 but the script suggests otherwise.

 

render () {
    const style = css`
      form > div {
        display: flex;
        justify-content: space-between;
        input {
          width: 100%;
        }
        button {
          min-width: 100px;
        }
      }
    `
    return (
      <div className="widget-addLayers jimu-widget p-2" css={style}>
        {this.props.hasOwnProperty('useMapWidgetIds') &&
          this.props.useMapWidgetIds &&
          this.props.useMapWidgetIds.length === 1 && (
            <JimuMapViewComponent
              useMapWidgetId={this.props.useMapWidgetIds?.[0]}
              onActiveViewChange={(jmv: JimuMapView) => {
                this.setState({
                  jimuMapView: jmv
                })
              }}
            />
        )}

        <p>{defaultMessages.instructions}</p>

 

Jeff.Thompson@arlingtontx.gov_arlingtontx

Class based React components are an older style of React. They are no longer recommended and the documentation has been buried on the React documentation site, but they are still completely valid and functional and there are no plans to remove them from React.

The instructions state that you should copy the folder containing the example Widget you want to use to your-extensions/widgets. Some of the example Widgets require installing third-party packages using npm and will fail if those packages are not installed.