React-grid layout. dynamic update of grid item values

Question

Im new in react and I would like to try to use the react-grid-layout.

I would like to understand if it is possible to display the 'x' value of the layout on the item so that I can see the x coordinate change with the movement of the mouse. Obviously each item must have its own 'x' coordinate value .. but I just can't figure out how to do it. I'm sure there is an easy way but I can't see it.

here my code

https://codesandbox.io/s/react-grid-layout-componet-isy1w?file=/src/App.js

here the function: el.x it is not updated with the layout change

createElement(el) {
const removeStyle = {
  position: "absolute",
  right: "2px",
  top: 0,
  cursor: "pointer"
};
const i = el.i;
/* const index=i.slice(1);
console.log(index) */

console.log();
return (
  <div className="wrapper" key={i} data-grid={el}>
    <p>
      <span className="text">
        {el.i} + **{el.x}**
      </span>
    </p>
    <p>
      <span className="text"></span>
    </p>
    <span
      className="remove"
      style={removeStyle}
      onClick={this.onRemoveItem.bind(this, i)}
    >
      x
    </span>
  </div>
);

}

thank you very much

Answer 1

You should go for creating AppContainer and then CardContainers With their respective functionality nested-in. and styling them with external library... I would recommend using styled-components, Very easy to use and much better to design app layout instead of creating from scratch. As I'm using in my project as well. I hope this will help you out. git repo https://github.com/faisalnazik/Django-REST-framework-React.JS-Typescript.git