-1

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

Hamid Shah
  • 31
  • 6
  • 2
    @0stone0, this question is not appropriate for [codereview.se]. It's missing the actual code, for a start. You should have pointed the asker at [A guide to Code Review for Stack Overflow users](//codereview.meta.stackexchange.com/a/5778), as some things are done differently over there - e.g. we need a good description of the *purpose* of the code to give context, and question titles should simply say what the code *does* (the question is always, "_How can I improve this?_"). It's important that the code works correctly; include the unit tests if possible. – Toby Speight Dec 06 '22 at 14:39

1 Answers1

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.

Srdjan Sanadrovic
  • 31
  • 3
  • Thank you so much for the detail information. These points makes sense. Object.values will make it more easier, thanks. – Hamid Shah Dec 07 '22 at 07:52