How to create dynamic drag and drop layout with react-grid-layout

Question

I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc.

My Issue

• I am creating dynamic UI so I am rendering my UI with data.
• Here in this library I need to create layout like { {i: 'a', x: 0, y: 0, w: 1, h: 2}
• When I am creating static UI I am able to achieve what I want.Here is working code sandbox

In static Ui with predefined layout I did like below.

    const layout = [
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
    { i: "b", x: 2, y: 0, w: 2, h: 1 },
    { i: "c", x: 4, y: 0, w: 2, h: 1 },
    { i: "d", x: 6, y: 0, w: 2, h: 1 },
    { i: "e", x: 0, y: 2, w: 2, h: 1 }
  ];

<div className="App">
  <GridLayout
    className="layout"
    layout={layout}
    style={{ backgroundColor: "blue" }}
  >
    {layout.map((li) => (
      <div key={li.i} style={{ backgroundColor: "yellow" }}>
        {li.i}
      </div>
    ))}
  </GridLayout>

This is working fine, But here the layout I have defined is static, So for this I searched and got one example with dynamic height and width, which is creating a dynamic layout.

But that is creating the layout with just random numbers which is not showing up with my UI (as per my use), This is what I found out in library for dynamic UI

What I am trying to do

I have this data as in my state

const [data1, setData] = useState({
    EmpData: [
        {
            empId: 11,
            lay1: { i: 'a' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 12,
            lay1: { i: 'b' },
            data: [
                {
                    firstName: 'Charles',
                    lastName: 'Johnsen',
                },
                {
                    firstName: 'Glen',
                    lastName: 'Tyson',
                },
            ],
        },
        {
            empId: 13,
            lay1: { i: 'c' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 14,
            lay1: { i: 'd' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 15,
            lay1: { i: 'e' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
    ],
});

By above data I am creating Ui as per my need

return data1.EmpData.map((li, index) => (
        <div key={index.toString()} data-grid={index}"> </div> //what should I pass here as key and layout that I am not getting
            <>
                {li.data.map((l) => (
                    <>
                        <div>{l.firstName}</div>
                        <div>{l.lastName}</div>
                    </>
                ))}
            </>
        </div>
    ));
};

Passing key and creating dynamic layout is where I am not able to figure out how can I achieve this, as this is totally new thing to me.

My UI is totally dynamic Every time I am going to get dynamic data so that much cards or divs I need to show.

Here is my code sand box what I am trying to do dynamically

Edit / Update

The answer I got from @Daniil Loban is very helpfull, but when I am trying to loop with my real time data it is looping twice, That is hapenning because my data is little bit different of what I have shown here

Actually I am not able to understand I use data1.EmpData[l.i] to get data to display when I map layout. this line.

My data

    [
{
  compId: 5,
  company_name: "Info",
  comp_data: [
    {
      empId: 1,
      empName:"steve"
    },
    {
      empId: 2,
      empName:"meg"
    }
  ]
},
{
  compId: 6,
  company_name: "wipro",
  comp_data: [
    {
      empId: 11,
      empName:"mark"
    },
    {
      empId: 12,
      empName:"Tnml"
    }
  ]
}

]

• How data goes is like company->employ of that company->data of that company,
• So here company can be multiple employ can be multiple similarly for data
• What i have updated in previous data I have not mentioned the company as I thought of writing minimal code.
• I have added full code Now and Here is my code sandbox

The issue

• Issue is it is repeating the data, I am getting duplicate data on display

• I ll explain here like company namme->companydata->employe name this should be the perfect but what is happening is -- companyname->the in one div both employ I a, getting and in other again I am getting both ones

It should be for Info there are two employ so in one grid one employ and in other one the other employ.

The issue is in generateDOM this function as layout is generated perfectly but in one Layout it is repeating all then same for others, if lenght is 3 then it is creating 3 layouts which is totally fine, but inside one layout it is agian looping and showing duplicate data

Here by I am attaching one image how it should show on UI

Answer 1

I think the problem was that layout was not used, I also noticed the incorrect use of random from lodash (but this is not essential)

I use data1.EmpData[l.i] to get data to display when I map layout.

I also created a sandbox where there is a button for dynamic addition, I think this is what you wanted.

  const generateDOM = () => {
    // Generate items with properties from the layout, rather than pass the layout directly
    const layout = generateLayout();
    return _.map(layout, function (l) {
      return (
        <div key={l.i} data-grid={l} className="bg-success">
          <>
            <div className="rounded" key="?"></div>
            {data1.EmpData[l.i].data.map((l) => (
              <>
                <div>{l.firstName}</div>
                <div>{l.lastName}</div>
              </>
            ))}
          </>
        </div>
      );
    });
  };

For updated question:

  const generateDOM = (lo) => {
    // Generate items with properties from the layout, rather than pass the layout directly
    const layout = generateLayout();
    return _.map(layout, function (l) {
      return (
        <div key={l.i} data-grid={l} className="bg-success">
          <div>{lo[l.i].empName}</div>
          {console.log(lo, l, active_menu)}
        </div>
      );
    });
  };

And when we render, we don't need map, but just one call:

  return (
    <>
      {data1.map((d, ind) => (
        <div className={ind === active_menu ? "compNameActive" : "compName"}>
          <p onClick={() => compClick(ind)}>{d.company_name}</p>
        </div>
      ))}
      <ReactGridLayout onLayoutChange={onLayoutChange} {...props}>
        {generateDOM(data1[active_menu].comp_data)}
      </ReactGridLayout>
    </>
  );

sanbox2

Answer 2

The layout should be an object containing the layout data, including an id i to store the relation to other data:

[
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
          ^------- The id to store the relation to other data
]

You need to build the layout first, either in a way that you choose, or directly from your emp-data. Only the id i has to match your emp-data, the other values are "independant" layout data.

Note that my example requires the empId to be unique (there is duplication in your example).

E.g.:

const generateLayout = () => {
  let totalIndex = -1;
  return data1.EmpData.reduce( (accEmp, empItem, empIndex) => {
    return accEmp.concat(
      empItem.data.map( (dataItem, index) => {
        const w = _.random(1, 2);
        const h = _.random(1, 3);
        totalIndex++;
        return {
          x: (totalIndex * 2) % 12,
          y: Math.floor(totalIndex / 6),
          w: w,
          h: h,
          i: empItem.empId + '-' + index
        };
      })
    );
  }, []);
}

Then, to display the content, you can iterate over the layout data, and find the elements to display by the id i stored in the layout. E.g.:

const generateDOM = () => {
  const layout = generateLayout();

  return layout.map((ly, index) => {
    const [ empIndex, dataIndex ] = ly.i.split('-');

    const empItem = data1.EmpData.find( eI => eI.empId.toString() === empIndex );
    const dataItem = empItem.data[ dataIndex ];

    return (
      <div key={ly.i} className="bg-success">
        <div className="rounded" key="?"></div>
        <>
          <div>{dataItem.firstName}</div>
          <div>{dataItem.lastName}</div>
        </>
      </div>
    );
  });
};

I think you can also do it the other way around, i.e. iterate over your emp-data, and find the matching layout item. But I'm not sure.