react-grid | : rocket : Simple React.js grid component | Grid library

I have the following code to resize an element in React. The element is resized using setEffect while providing dynamic width and height.

I want to scale the element on height change instead of resizing it so when the windows height is changed, the element is scaled down instead of resized. How to do so ? Keeping the same ratio.

https://codesandbox.io/s/boring-hermann-vmweu?file=/src/index.js

I'm having some troubles with webpack, after some commits I tried to run the server but nothing appear at http://localhost:3000. The config seems OK and this already worked meanwhile. Any suggestions are welcome. At webpack.config, I tried to use 127.0.0.1 instead localhost keyword and didn't worked. Also, changing http to https and didn't change to better.

The console output:

I am working with react-grid-layout and creating some grids which are drag-drop as well as resizable.

So i am able to achieve that and it is working fine.

My UI is like I have two tabs and each tab have some grids, so when I move from one tab two other I am showing that tab's grid.

What I am trying to do

On change of layout I want to store that layout to local storage so that when I refresh or open that tab again the formation of grid should be the one which I changed.

So as per mentioned in library I am using this

• So what I am doing is when ever onLayoutChange happens I am storing the layout with respect to my active_tab and when I change from one to other tab I am checking Local storage and matching which tab is active and getting that particular layout.
• But this is not happening it is just taking the basic layout.

What I did

Based on this proposed solution in the AG-Grid Github issues, I am trying to implement a jQuery DateTime Picker as a filter in my React/AG_Grid project.

I currently have my table set up so that I can clear the filters that have been applied to my table with a button click. The desired behavior is that once the Reset Filters button is clicked, the filters AND the text inside of the filter input should be cleared. As it is set up now, the filters are being cleared from the table as desired but when I reopen the filter input, the text from the previous filter is still there.

I have a Code Sandbox set up here with a simplified version of my current setup.

Steps to recreate:

• Open filter for Event Timestamp column
• Apply filter to Event Timestamp column (2020/01/31 00:00 - 2020/06/31 00:00)
• Click 'Reset Filters' at the top of the table
• Open filter for Event Timestamp column
• Notice that text from the previous filter still populates the input

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,

I am using react-grid-layout to make drag-drop and resize components, So i am able to achieve the functionality as mentioned in the doc.

My Issue

• I am creating dynamic UI so I am rendering my UI with data.
• Here in this library I need to create layout like { {i: 'a', x: 0, y: 0, w: 1, h: 2}
• When I am creating static UI I am able to achieve what I want.Here is working code sandbox

In static Ui with predefined layout I did like below.

Any idea how to resolve this error? I get it when trying npm install:

npm ERR! Found: react@16.14.0 npm ERR! node_modules/react npm ERR! react@"^16.14.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^17.0.1" from react-card-flip@1.1.0 npm ERR! node_modules/react-card-flip npm ERR! react-card-flip@"^1.0.11" from the root project

The package.json has: "react-card-flip": "^1.0.11",

I removed the node_modules directory and the package-lock.json file.

I'm not sure where the reference to 1.1.0 is coming from. I DID try to install it earlier when trying to upgrade React 17, but ran into limitations with blueprintjs/core 3.39.0 requiring React 16.14.0.

Thanks for any ideas or help you can provide.

Full content of the package.json below in case that helps.

package.json content:

I am using this CSS background image to display a tiling pattern on my DIV.

I am trying to run the command npm run dev or npm run production. But none of them are successful. Once I run the command I am getting an error like in image :

error after running npm run prod

My package.json file is like below :