Как я могу отобразить пары ключ-значение в сетке таблицы в реаги js.?

Question

Я пытаюсь отобразить пары ключ-значение в реакции js,

, но почему-то Я не могу отобразить их правильно . Я создал виджет таблицы, и я не получаю правильное отображение

Виджет моей таблицы

import React from "react";

function Table(props) {
  const { tablevalue } = props;

  console.log(tablevalue);

  return (
    <div className="table">
      <table className="table table-hover">
        <tbody>
          {tablevalue.map((item, value) =>
            Object.entries(item, (key, value) => {
              return (
                <tr className="table-row">
                  <th scope="col" key={`tablevalue-${key}`}>
                    {key}
                  </th>
                  <td key={`tablevalue-${value}`}>{value}</td>
                </tr>
              );
            })
          )}
        </tbody>
      </table>
    </div>
  );
}

export default Table;

app. js

import React, { Fragment } from "react";

import Dropdown from './components/widgets/Dropdown/index'
import Table from './components/widgets/Table/index'

function DropdownTest() {
  return (
      <h3>
        <b>Profit</b>
      </h3>
      <br />
        <Table 
        tablevalue = {[{key:'Binance' , value: 'Polonix'}, {key:'Profit' , value:'Loss'}]}
        />
      </div>

  );
}
export default DropdownTest;

Мой вывод

В то время как я хочу, чтобы мой вывод отображался в виде таблицы

Answer 1

Вы можете использовать заголовок таблицы

  <tbody>
    <tr>
      <th>Key</th>
      <th>Value</th>
    </tr>
    {tablevalue.map(({ key, value }) => (
      <tr className="table-row">
        <td key={`tablevalue-${key}`}>{key}</td>
        <td key={`tablevalue-${value}`}>{value}</td>
      </tr>
    ))}
  </tbody>

Код

const Table = ({ tablevalue }) => (
  <div className="table">
    <table className="table table-hover">
      <tbody>
        <tr>
          <th>Key</th>
          <th>Value</th>
        </tr>
        {tablevalue.map(({ key, value }) => (
          <tr className="table-row">
            <td key={`tablevalue-${key}`}>{key}</td>
            <td key={`tablevalue-${value}`}>{value}</td>
          </tr>
        ))}
      </tbody>
    </table>
  </div>
);

const DropdownTest = () => (
  <div>
    <h3>
      <b>Profit</b>
    </h3>
    <br />
    <Table
      tablevalue={[
        { key: "Binance", value: "Polonix" },
        { key: "Profit", value: "Loss" }
      ]}
    />
  </div>
);

ReactDOM.render(
  <React.StrictMode>
    <DropdownTest />
  </React.StrictMode>,
  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>

Answer 2

Я думаю, что вы должны создать заголовок отдельно. и после этого l oop продумал данные и применил css для строки таблицы. пожалуйста, найдите код ниже.

    import React from 'react';
import './index.css';
function Table(props) {

    const {
        tablevalue,
    } = props

    console.log(tablevalue)

    return (
        <div className="table">
            <table className="table table-hover">
                <tbody>
                    <tr>
                        <th>Key</th>
                        <th>Value</th>
                    </tr>
                    {tablevalue.map((item, value) => {
                        return (
                            <tr className="table-row">
                                <td key={`tablevalue-${value}`}>{item.key}</td>
                                <td key={`tablevalue-${value}`}>{item.value}</td>
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    )
}

export default Table;

Answer 3

Проверьте эту песочницу: https://codesandbox.io/s/goofy-breeze-fdcdr

Object.keys (tablevalue [0]). Map ((ключ) => {ключ}) . Вы можете использовать это в заголовке tr и l oop поверх него, затем

Измените компонент Table на что-то вроде этого:

import React from "react";

function Table(props) {
  const { tablevalue } = props;
  return (
    <div className="table">
      <table className="table table-hover">
        <tbody>
          <tr>
            {Object.keys(tablevalue[0]).map(key => (
              <th key={key}>{key}</th>
            ))}
          </tr>
          {tablevalue.map(({ key, value }) => (
            <tr className="table-row" key={`tablevalue-${key}`}>
              <td>{key}</td>
              <td>{value}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default Table;

Answer 4

Я не видел, чтобы Object.entries использовал этот способ. Я обычно использовал бы forEach на нем:

Object.entries(item).forEach(entry => {
  let key = entry[0];
  let value = entry[1];
});

Хотя немного более производительно было бы использовать for in вместо этого, так как Object.entries создает новый массив, тогда forEach проходит через то, что не нужно:

for (const key in item) {
  let value = obj[key];
}

Answer 5

Вы можете сделать это следующим образом:

import React from "react";

export default props => {
  console.log(props.tablevalue);
  const ths = props.tablevalue.map(({ key, value }) => (
    <th key={value}>{key}</th>
  ));
  const values = props.tablevalue.map(obj => <td>{obj.value}</td>);

  return (
    <>
      <table>
        <tr>{ths}</tr>
        <tr>{values}</tr>
      </table>
    </>
  );
};

Вот stackblitz , который отображает таблицу.

В конечном итоге все сводится к тому, как вы хотите эту таблицу чтобы быть отображенным, вы можете настроить некоторые вещи, как вы хотите.