Hello World Component for Dashbuilder using React

HelloWorldComponent.tsx

import * as React from "react";
import { ComponentController, DataSet } from "@dashbuilder-js/component-api";
import { useState, useEffect } from "react";

const NAME_PROP = "name";
const DEFAULT_NAME = "World";

interface Props {
  controller: ComponentController;
}
export function HelloWorldComponent(props: Props) {
  const [name, setName] = useState<string>(DEFAULT_NAME);
  const [dataset, setDataset] = useState<DataSet>();

  useEffect(() => {
    props.controller.setOnInit((params: Map<string, any>) => {
      setName(params.get(NAME_PROP) || DEFAULT_NAME);
    });
    props.controller.setOnDataSet((_dataset: DataSet) => {
      setDataset(_dataset);
    });
  }, [props.controller]);

  return (
    <>
      <h2>Hello {name}!</h2>
      {dataset && (
        <div>
          <h4>Dataset</h4>
          <table>
            <thead>
              <tr>
                {dataset.columns.map(c => (
                  <th>{c.name}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {dataset.data.map((row, i) => (
                <tr key={i}>
                  {row.map((val, j) => (
                    <td key={j}>{val}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </>
  );
}

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { HelloWorldComponent } from "./HelloWorldComponent";
import { ComponentApi } from "@dashbuilder-js/component-api";

const api = new ComponentApi();

ReactDOM.render(<HelloWorldComponent controller={api.getComponentController()} />, document.getElementById("app")!);