react-grid layout html not updating cols - reactjs

Question

I use react Grid-layout : https://github.com/react-grid-layout/react-grid-layout
I do not understand why the number of column does not update in my table through the web browser.
In fact, this.props.cols.lg is either 17 or 24.
When it's 17, my table is displayed correctly. On the other hand, when I choose a period with 24 columns, my columns are placed one below the other from the 18th.
this.props.cols.lg to the correct value (17 or 24) but my HTML page does not update to the design level.
This is the right table on one single row :
Right table
Like you can see, the firefox web console shows react properties are good with 17 :
and the bad table
Bad table
here again, the firefox web console shows react properties are right (24) but not applied by the web browser :
Important information,
this.props.cols.lg=loopValue+1; **contains the right value (17 or 24) but apply on 17**
Thank you in advance for your help.
Here is a part of my code:
import React, { useState, useEffect, Fragment } from 'react';
import { WidthProvider, Responsive } from "react-grid-layout";
import ReactTooltip from 'react-tooltip';
import _ from "lodash";
import { Button, Container } from 'react-bootstrap';
const ResponsiveReactGridLayout = WidthProvider(Responsive);
import { Responsive as ResponsiveGridLayout } from 'react-grid-layout';
/**
* This layout demonstrates how to use a grid with a dynamic number of elements.
*/
export class AddRemoveLayout extends React.PureComponent {
//les propriétés par défaut
static defaultProps = {
className: "layout border-darken-1 child-background-color",
cols:
{ lg: 10, md: 10, sm: 10, xs: 10, xxs: 10 },
width: 1000,
margin: [0, 0],
preventCollision: true,
autoSize: true,
// preventCollision: true,
rowHeight: 70,
// Build HTML to insert
render() {
//Week
let createDateItem =
(x, y, day) => ({
i: `date-${x}_${y}`,
x,
y,
w: 1,
h: 1,
myText: `${day}` ,
static: true
});
/**
*
* #param {*} y
* #param {*} xStart
* #param {num semaine} dateStart
* #param {nombre semaine total} count
*/
let getDateItems =
(y, xStart, dateStart, count,dateEnd) => {
let items = [];
let loopValue = 0;
while(dateStart<=dateEnd){//semainee
if(loopValue>1){
dateStart.setDate(dateStart.getDate() + 7)
}
if(dateStart<=dateEnd){
items.push(
createDateItem(xStart + loopValue, y, loopValue === 0 ? 0 :
(dateStart.getDate()+"/" +(dateStart.getUTCMonth()+1)+ " (Sem. "+loopValue +") ")
))
}
loopValue++;
}
console.log('props:')
console.log(this.props);
this.props.cols.lg=loopValue+1;
this.props.cols.md=loopValue+1;
this.props.cols.sm=loopValue+1;
this.props.cols.xs=loopValue+1;
this.props.cols.xxsloopValue+1;
console.log(this.props);
// console.log(AddRemoveLayout.defaultProps)
return items;
}
;

Answer 1

We found the solution :
data: { idHoraire: 1 },
It was always the same item sent to PHP, with this code, I have a great dispaly of my cols because I either send 1 (17 cols) or 2 (25 cols) :
data: { idHoraire: url === "index2" ?2 : 1, },