Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Dynamically render react children as Grid Items

See original GitHub issue

Went through quite a few issues here to find how items are dynamically rendered mapping children but wasn’t able to modify my own case; attached is a sample codesandbox: https://codesandbox.io/s/elastic-carson-kp9s3?file=/src/App.js:840-850

It renders when I use only <GridLayout /> with child components. It also renders when I only render the children using <RandomizeLayout /> without <GridLayout />.

But when I use them in conjunction I don’t get any useful errors. Any suggestions? I’d like to evolve this and then render the layout values dynamically (next steps) so rending the contents in this manner is a required case.

Issue Analytics

State:
Created 2 years ago
Comments:5

Top GitHub Comments

1reaction

yangzheng93commented, Aug 1, 2022

try:

<div key={row.i} className="border-[1px] border-solid border-black">
  <CustomComponent domId={row.i} />
</div>

0reactions

flyingbirdhubcommented, Jul 14, 2022

https://github.com/react-grid-layout/react-grid-layout#custom-child-components-and-draggable-handles

you can add {props.children} in your component, but i still stuck in a problem, that i cannot move it

Top Results From Across the Web

How to create a dynamic grid in react.js? - Stack Overflow

I got this working with a little bit of tinkering. Never used reactstrap before, so it was fun to play around with it...

How to Generate Bootstrap (or any) Grids Dynamically in React

To create the rows we make use of the React.Children.toArray method, this allows us to convert the children into an array that we...

How to Render a Component Dynamically Based on a JSON ...

In this guide, instead of using JSX to render the component, we will use React.createElement() and build the component based on a JSON...

Example of Dynamically Adding/Removing Children #13

This happens because SortableGrid keeps copies of the children, and removes them based on missing keys when props update. If you assign the ......

ag-Grid React Dynamic Components

A simple Grid using React Components as Cell Renderers, with Child Components, Two-Way Binding and Parent to Child Components Events. This example demonstrates ......