Визуализировать данные (таблицы) json, содержащих координаты X Y (React JS)

Question

Я отрисовываю json с двумя таблицами, каждой таблице заданы координаты х у. Мне нужно отрисовать эти таблицы в соответствии с этими координатами.

"tables": [
{ "tableName": "One",
"coordinates": {
"x": "100",
"y": "100"
},
"columns": [{},{}]
},
{"tableName": "Two",
"coordinates": {
"x": "200",
"y": "200"
},
"columns": [{},{}]
}]

После того, как я прошлась по таблицам map методом, я "упаковала" данные в . Пытаюсь присвоить контейнеру style={{}} с этими координатами, но они отрисовываются друг на друге.

    export const Table = ({table}) => {
const {tableName, coordinates} = table;
return (
<div style={{position: "absolute", left: coordinates.x, top: coordinates.y}}>
<p>{tableName}</p>
<div>{table.columns.map((el) => (
<div>{columnName}</div>))}
</div>
</div>
);
};

Как в моем случае расположить по правильным координатам таблицы?

Answer 1

Когда стили задаются через React числа если они означают пиксели должны быть числами, а не строками, либо содержать постфикс px. В данном примере я использовал оба варианта:

<div style={{position: "absolute", left: +coordinates.x, top: coordinates.y + "px"}}>

const json ={
  "tables": [
    {
      "tableName": "One",
      "coordinates": {
        "x": "100",
        "y": "100"
      },
      "columns": [
        {},
        {}
      ]
    },
    {
      "tableName": "Two",
      "coordinates": {
        "x": "200",
        "y": "200"
      },
      "columns": [
        {},
        {}
      ]
    }
  ]
}

const Table = ({table}) => {
  const {tableName, coordinates} = table;
  return (
    <div style={{position: "absolute", left: +coordinates.x, top: coordinates.y + "px"}}>
      <p>{tableName}</p>
      <div>{table.columns.map((el) => (
        <div>{el.columnName}</div>))}
      </div>
    </div>
  );
};

const App = () => {
   return (
    <div>
      {json.tables.map(table => Table({table}))}
    </div>
   )
}

const root = ReactDOM.render(
  <App/> ,document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

БЛОГ НА HUSL

Визуализировать данные (таблицы) json, содержащих координаты X Y (React JS)

Ответы (1 шт):