Как передать объект массива в response-grid-layout.Элементы отображаются вертикально и не образуют сетку

Question

Я использую STRML response-grid-layout, Package-подобную перетаскиваемую сеточную систему для React.Это ссылка на базовый макет;https://strml.github.io/react-grid-layout/examples/1-basic.html Я поставил код ниже.Вот мой вопрос: куда мне включить мои динамические данные?

Все примеры показывают статические данные.И я не совсем понимаю, как передать объект массива.

import _ from "lodash";
import RGL, { WidthProvider } from "react-grid-layout";
import './App.css'

const ReactGridLayout = WidthProvider(RGL);

class BasicLayout extends React.PureComponent {
  static defaultProps = {
    className: "layout",
    items: {},
    rowHeight: 30,
    onLayoutChange: function() {},
    cols: 12
  };

  constructor(props) {
    super(props);

    const layout = this.generateLayout();
    this.state = { layout };
  }

  generateDOM() {
    return _.map(_.range(this.props.items), function(i) {
      return (
        <div key={i}>
          <span className="text">{i}</span>
        </div>
      );
    });
  }

  generateLayout() {
    const p = this.props;
    return _.map(new Array(p.items), function(item, i) {     // Where do I pass in my array object?
      const y = _.result(p, "y") || Math.ceil(Math.random() * 4) + 1;
      return {
        x: (i * 2) % 12,
        y: Math.floor(i / 6) * y,
        w: 2,
        h: y,
        i: i.toString()
      };
    });
  }

  onLayoutChange(layout) {
    this.props.onLayoutChange(layout);
  }

  render() {
    return (
      <ReactGridLayout
        layout={this.state.layout}
        onLayoutChange={this.onLayoutChange}
        {...this.props}
      >
        {this.generateDOM()}
      </ReactGridLayout>
    );
  }
}

export default BasicLayout;```

I am not even sure if this will solve the problem of the grid not forming.

My object is being created by parsing a CSV file into JSON. I map over this item and place it in state. This is contained in renderData(). As it stands, this code (below) will render, but all the items in the grid are lining up vertically instead of filling the grid. 

```import React, { Component } from 'react'
import Papa from 'papaparse'
import GridLayout from 'react-grid-layout'
import './App.css'

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {data: [] };  // State holds gridorder / neworder
        this.handleChange = this.handleChange.bind(this);
        this.updateData = this.updateData.bind(this)
        // this.renderData = this.renderData.bind(this)
    }

    handleChange(event) {
        event.preventDefault()
        const inventory = event.target.files[0]
        Papa.parse(inventory, {
            header: true,
            complete: this.updateData
        })
    } // END

    updateData(results) {
        const data = results.data
        console.log(data)
        this.setState({data}) // {data:data} 
    }

    renderData(props) {    
        return  this.state.data.length > 1 
           ?  // This performs the check      
           this.state.data.map((item, y) => (  // 
            <div className="react-grid-item grid-item" key={item.sku}  >
                <img src={item.image} alt="product" />
            </div>  
             )) 
           : null         
    } // END 

    render() {     
        console.log("here is my " + this.state) 
        // const layout = {x: 0, y: 0, w: 1, h: 2}
        // const dataList = this.state.data.map((i) => (  
        //     <div className="react-grid-item grid-item" key={i.sku}  w={0} h={0} x={0} y={0}  >
        //         <img src={i.image} alt="product" />
        //     </div>  
        // ))
        const layout = this.state.data

        return (
            <div>
                <div>
                    <form >
                        <div>
                            Load up a file here:
                            <input type="file" onChange={this.handleChange} />
                        </div>
                    </form>
                </div>

                <div className="album">  
                    <div className="container" >  

                        <GridLayout cols={3} verticalCompact={false} className="react-grid-layout grid" width={1000} layout={layout} >   
                            {this.renderData()} 
                        </GridLayout>   

                        {/* <GridLayout cols={3} verticalCompact={false} className="react-grid-layout grid" width={1000}  >   
                            {dataList}
                        </GridLayout>  */}

                    </div>                 
                </div>
            </div>          
        );
    }
} // END

export default App```

In React Developer Tools, the parent has a "layout" property that is receiving my object. However, it is not receiving w,h,x,y values which it wants. The default in react-grid-layout just changes the y value. Therefore, it is not forming the grid. Probably really simple. Appreciate your help!