React-Grid-Layout: How to change ResponsiveReactGridLayout's cols programatically? - react-grid-layout

Question

I'm using ResponsiveReactGridLayout and I want to change it's cols programatically.
When I upload an image, I want my ResponsiveReactGridLayout'cols is changed base on the image size.
I tried below and got error:
Unhandled Runtime Error
Error: ResponsiveReactGridLayout: cols entry for breakpoint lg is missing!
Is there other way to do that. Thank you for your helping guys
constructor(props) {
super(props);
this.state = {
cols: { lg: 12, md: 12, sm: 12, xs: 12, xxs: 12 },
rowHeight: 100,
// rows: 3,
// cols: 12,
items: _.range(0, 36).map(function (i, key, list) {
return {
i: i.toString(),
x: i % 12,
y: Math.floor(i / 12),
w: 1,
h: 1,
initCell: true,
draggable: false,
static: true,
isBounded: true,
};
}),
newCounter: 0,
dimensions: { height: 0, width: 0 },
};
this.onImgLoad = this.onImgLoad.bind(this);
this.onAddItem = this.onAddItem.bind(this);
this.onBreakpointChange = this.onBreakpointChange.bind(this);
}
onImgLoad({ target: img }) {
let numCols = Math.round(img.offsetWidth / 100);
let numRows = Math.round(img.offsetHeight / 100);
console.log(numCols + ' ' + numRows);
this.setState({
cols: { lg: numCols, md: numCols, sm: numCols, xs: numCols, xxs: numCols },
rowHeight: 100,
items:_.range(0, numCols * numRows).map(function (i, key, list) {
return {
i: i.toString(),
x: i % numCols,
y: Math.floor(i / numCols),
w: 1,
h: 1,
initCell: true,
draggable: false,
static: true,
isBounded: true,
};
}),
cols: { lg: numCols, md: numCols, sm: numCols, xs: numCols, xxs: numCols },
dimensions: { height: img.offsetHeight, width: img.offsetWidth },
newCounter: 0,
});
console.log(img.offsetHeight + " " + img.offsetWidth);
}
<img onLoad={this.onImgLoad} src={src} />
<ResponsiveReactGridLayout
{...this.props}
onLayoutChange={this.onLayoutChange}
onBreakpointChange={this.onBreakpointChange}
onDrop={this.onDrop}
measureBeforeMount={false}
useCSSTransforms={this.state.mounted}
cols={this.state.cols}
// rowHeight={this.state.rowHeight}
compactType={null}
isResizable={false}
// preventCollision={true}
allowOverlap={true}
isDroppable={true}
isBounded={true}
margin={[0, 0]}
style={{
backgroundImage: "url(" + src + ")",
backgroundPosition: "center",
backgroundSize: "100% 100%",
backgroundRepeat: "no-repeat",
}}>
</ResponsiveReactGridLayout>
Click this link to see error
Error Image