数据表格

渲染一个包含由原始数组动态创建的行的表格。

• 渲染一个包含两列（ID和Value）的<table>元素。
• 使用Array.prototype.map()方法将data中的每个项渲染为一个带有适当key的<tr>元素。

const DataTable = ({ data }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Value</th>
        </tr>
      </thead>
      <tbody>
        {data.map((val, i) => (
          <tr key={`${i}_${val}`}>
            <td>{i}</td>
            <td>{val}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

const people = ['John', 'Jesse'];
ReactDOM.createRoot(document.getElementById('root')).render(
  <DataTable data={people} />
);