Make the data selection from object to be dry

Question

Quick question more on how should I approach this below to be dry. I have data which comes from the backend and on front i use react I have a component which is basically a table. Two api calls witch return different objects. I want to reuse one component rather than creating two separate tables as below. I pass an object of data to a table component, just need to know according to the object which keys to select.

      <table>
          <tbody>
            <tr>
              <td>{name}</td>
              <td>{first_test.week_day}</td>
              <td>{first.four.three}</td>
            </tr>
          </tbody>
        </table>

       <table>
          <tbody>
            <tr>
              <td>{name}</td>
              <td>{test.time}</td>
              <td>{another.one.two}</td>
            </tr>
          </tbody>
        </table>

two separate api requests example:

  {
     first: {four: {three: "different"}},
     first_test: {week_day: 'Saturday'},
     name: "first test"
  }
  {
    another: {one: {two: "nice"}},
    test: {time: 10:00},
    name: "test"
  }
   

so what would be a best way to approach this being dry without creating multiple components ? maybe some json schema?

It might be duplicate if someone drops the another related question would appreciate.

Answer 1

You conform whatever input to match your generic table component like so

function GenericTable({first, second, third}) {
return (
<table>
  <tbody>
    <tr>
      <td>{first}</td>
      <td>{second}</td>
      <td>{third}</td>
    </tr>
  </tbody>
</table>
)
}

and call it like

<GenericTable first={name} second={first_test.week_day} third={first.four.three} />

or

<GenericTable first={name} second={test.time} third={another.one.two} />

---

update 1 based on comment

function GenericTable({ columns }) {
  columnstb = columns.map((column, index) => (<td key={index}>{column}</td>);
return (
<table>
  <tbody>
    <tr>
      {columnstb}
    </tr>
  </tbody>
</table>
)
}

and call it like

<GenericTable columns={[name, first_test.week_day, first.four.three]} />