Cols not updating after select list changing

Hello,

I use react Grid-layout, thanks to the developers for this superb work.

On the other hand, I do not understand why the number of column does not update in my table.

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

https://www.dropbox.com/s/2qymjbmtnjflvka/Capture%20d%E2%80%99%C3%A9cran%202021-03-12%20%C3%A0%2019.37.45.png?dl=0

and the bad table

https://www.dropbox.com/s/2gkayc4veazlg2c/Capture%20d%E2%80%99%C3%A9cran%202021-03-12%20%C3%A0%2019.37.57.png?dl=0

IMPORTANT :

this.props.cols.lg=loopValue+1;

contains the right value (17 or 25 cols) but it does not apply to my site.

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;
            }
            ;
    ```

Blog

Cols not updating after select list changing

ddubois2

Join Our Newsletter. No Spam, Only the good stuff.

Related