How to use the solid-js.createState function in solid-js

function PlotWrapper(props: PlotWrapperProps) {
  let el: HTMLDivElement = null!;
  let chart: ECharts = null!;

  const [state, setState] = createState({
    mounted: false,
    cachedPlotData: null,
  })

  let updatePlot = (plotData: any) => {
    if (chart == null) {
      chart = echarts.init(el as HTMLDivElement);
    }
    console.log("updating plot with:", plotData)
    chart.setOption(plotData)
  }

  createEffect(() => {
    // effect to monitor changes to props.plotData
    let newPlotData = props.plotData;
    if (sample(() => state.mounted)) {

function Table(props: {
    data: TableData,
    cbSort: (sortKind: number, columnIndex?: number) => void,
  }) {

  const [state, setState] = createState({
    rowsData: [] as Value[][],
    headerData: [] as ColHeader[],
    sortColIndex: undefined as (number | undefined),
    sortColKind: 0,
  })

  let columnFormatters = [] as ColumnFormatter[];

  createEffect(() => {
    console.log("Data updated", props.data.length)
    const data = props.data
    if (data.length == 0) {
      return;
    }

    // update column formatters

export function PlotHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  /*
  const dataFetchOptions = {
    sortKind: 0,
  } as DataFetchOptions
  */

  const [state, setState] = createState({
    columns: [] as string[],
    plotData: {} as any,
    selectedColX: undefined! as number,
    selectedColY: undefined! as number,
  })

  createEffect(() => {
    // handels updates of selected column indices
    let xCol = state.selectedColX;
    let yCol = state.selectedColY;
    let filter = props.filter;
    if (xCol != undefined && yCol != undefined) {
      fetchData(xCol, yCol, filter);
    }
  })

export function MapHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  const [state, setState] = createState({
    columns: [] as string[],
    mapData: {} as any,
    selectedCol: undefined! as number,
  })

  createEffect(() => {
    // handels updates of selected column indices
    let col = state.selectedCol;
    let filter = props.filter;
    if (col != undefined) {
      fetchData(col, filter);
    }
  })

  async function fetchColumns() {
    let columns = await store.fetchColumns()

export function Dropdown(props: DropdownProps) {

  const [state, setState] = createState({
    active: false,
  })

  function onClick(event: Event) {
    setState({active: !state.active})
  }
  function onBlur(event: Event) {
    setState({active: false})
  }

  // Note the click handler of the dropdown items uses an onMouseDown
  // so that the onBlur of the menu expansion isn't handled before the
  // onClick of the item, see:
  // https://stackoverflow.com/questions/17769005/onclick-and-onblur-ordering-issue
  return (
    <div class="{(&quot;dropdown&quot;"></div>

function MapWrapper(props: {
    mapData?: any,
  }) {

  let el: HTMLDivElement = null!;
  let map: leaflet.Map | undefined = undefined;
  let layerGroup: leaflet.LayerGroup | undefined = undefined;

  const [state, setState] = createState({
    mounted: false,
    cachedMapData: null,
  })

  let updateMap = (mapData: any) => {
    if (map == null) {
      console.log("Init map", el);
      map = leaflet.map(el, {preferCanvas: true}).fitWorld();
      leaflet.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      }).addTo(map)
    }


    let t1 = performance.now()
    if (false) {

export function TableHandler(props: {
    store: StoreInterface,
    filter: string,
    onSetFilter: (s: string) => void,
  }) {

  const { store } = props

  const [state, setState] = createState({
    tableData: [] as TableData,
    sortKind: 0,
    sortColumn: undefined as (string|undefined),
    pagination: {
      numPages: 0,
      currentPage: 0
    } as PaginationData
  })

  initialize()

  async function initialize() {
    await fetchNumPages()
    await fetchData()
  }

export function App({store} : {store: StoreInterface}) {

  const [state, setState] = createState({
    appstate: {
      tabs: [
        {
          name: {
            icon: "database",
            text: "Table",
          },
          widgets: [
            {
              type: "table",
              filterId: "default",
            },
          ]
        },
        {
          name: {