Reactjs Component Reusability

Question

I am working on a project in react. Where most of the data on different tabs have a table. So I design the "TableItems" component and passed the data according to the component. Right now based on params I toggle the table data. Is this the correct way? some tables have different columns so the data table is varying.

Here is the snippet from the project. Need your valuable feedback https://codesandbox.io/s/amazing-ptolemy-k9kkrc?file=/src/App.js

Answer 1

Code is valid and working but as your title is "Component reusability" there are a few points you should think about.

1. How reusable is this component? Let's say some time from now one more table needs to be displayed. In that case would this component help you in any way? What I really want to say is that your idea of reusable components looks more like several components with conditional rendering showing correct one.

2. Don't lock in your reusable component Conditional rendering a component based on location.pathname is also hindering component reusability. If your goal is to have reusable component you have shot yourself in a foot by limiting where component can be used to one single route.

3. More specificly to your problem, consider this code

<tbody>
  {rowData.map((data) => (
    <tr>
      {Object.values(data).map((value) => (<td>{value}</td>))}
    </tr>
  ))}
</tbody>

It will iterate over each object in array and each value in object.