文本节点不能作为<table>的子节点出现
在tbody元素的末尾有一个分号，它是独立的。删除它。

<table className="table">
  <thead>
    <tr className='bg-dark text-white'>
      <th scope="col">#</th>
      <th scope="col">Product Name</th>
      <th scope="col">Product Number</th>
      <th scope="col">Color</th>
      <th scope="col">List Price</th>
      <th scope="col">Modified Date</th>
      <th scope="col">Action</th>  
    </tr>
  </thead>
  <tbody>
    {products.map((product, index) => (
      <tr>
        <th scope='row'> {index + 1}</th>
        <td>{product.name}</td>   
        <td>{product.number}</td> 
        <td>{product.color}</td> 
        <td>{product.price}</td> 
        <td>{product.date}</td> 
        <td>
          <Link className='btn btn-primary m-2'><i className="fa fa-eye" aria-hidden="true"></i></Link>
          <Link className='btn btn-otline-primary m-2'>Edit</Link>
          <Link className='btn btn-danger m-2'>Delete</Link>
        </td> 
      </tr>
    ))}; // <-- remove trailing text node
  </tbody>
</table>

警告：列表中的每个子项都应该有唯一的“键”属性。
将数组Map到JSX时，最外层的Map元素需要一个React键。React键在同级元素中应该是唯一的。id和其他GUID属性可以提供很好的React键，但只要数组没有发生变化，数组索引就可以作为后备。
示例：

<tbody>
  {products.map((product, index) => (
    <tr key={product.id}> // <-- React key on outer element
      <th scope='row'>{index + 1}</th>
      <td>{product.name}</td>   
      <td>{product.number}</td> 
      <td>{product.color}</td> 
      <td>{product.price}</td> 
      <td>{product.date}</td> 
      <td>
        <Link className='btn btn-primary m-2'>
          <i className="fa fa-eye" aria-hidden="true" />
        </Link>
        <Link className='btn btn-otline-primary m-2'>Edit</Link>
        <Link className='btn btn-danger m-2'>Delete</Link>
      </td> 
    </tr>
  ))}
</tbody>

请参阅Lists and Keys以了解有关React密钥用法的详细信息。

使用map()时，必须为直接Map的Element提供一个unquie key，以便React识别哪些项已更改、已添加或已删除。
它需要在它的兄弟姐妹中是独一无二的。

{products.map((product, index) => (
   <tr key={ product.name}>  <!-- NEW -->

   </tr>
))}

参考：

https://reactjs.org/docs/lists-and-keys.html#keys