nested grids with React

[jianghai]

How to implement nested grids with React, because the content in the example is all strings, and it is not very understanding how React needs to be done.

import { useEffect, useRef } from 'react';

function Demo() {
  const gridContainerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (gridContainerRef.current) {
      GridStack.init(
        {
          float: false,
          acceptWidgets: true,
          column: 12,
          minRow: 1,
        },
        gridContainerRef.current
      );
    }
  }, []);

  const items =[{ id: 'item-1-1', x: 0, y: 0, w: 2, h: 2 }, { id: 'item-1-2', x: 2, y: 0, w: 2, h: 2 }]

  return (
    <div className="grid-stack" ref={gridContainerRef}>
      {items.map((item, i) => {
        return (
          <div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
            <div className="grid-stack-item-content">
              {item.id}
            </div>
          </div>
        )
      })}
    </div>
  )
}

[jianghai]

I'm not sure if this is the best practice

function Grid({ items }: any) {
  const gridContainerRef = useRef<HTMLDivElement>(null)

  useEffect(() => {
    if (gridContainerRef.current) {
      GridStack.init(
        {
          float: false,
          acceptWidgets: true,
          column: 12,
          minRow: 1,
        },
        gridContainerRef.current
      );
    }
  }, []);
  return (
    <div className="grid-stack" ref={gridContainerRef}>
      {items.map((item, i) => {
        return (
          <div key={item.id} className="grid-stack-item" gs-id={item.id} gs-w={item.w} gs-h={item.h} gs-x={item.x} gs-y={item.y}>
            <div className="grid-stack-item-content">
              {item.id}
              {item.children && <Grid items={item.children}></Grid>}
            </div>
          </div>
        )
      })}
    </div>
  )
}

function Demo() {
  const items =[{
    id: 'item-1', x: 0, y: 0, w: 2, h: 2,
  }, {
    id: 'item-2', x: 2, y: 0, w: 2, h: 2,
    children: [{
      id: 'item-2-1', x: 0, y: 0, w: 6, h: 6,
    }]
  }]
  return <Grid items={items} />
}

[wangtangsheng]

when items has minW、minH, how to setAttribute to 'grid-stack-item' element? like:

const items =[{
id: 'item-1', x:0, y: 0, w: 2, h: 2, minW: 3
}]

@jianghai

[kuzurec]

I have the same problem too