react-grid layout html not updating cols

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, },