Suggestion to refactor code into simple way -React

I have multiple with the same class name and method with different parameter i want to refactor the below code to a simpler way any suggestion would be helpful.

<table class="greyGridTable">
  <tbody>
    <tr>
      <td>AA</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,a)}</td>
    </tr>
    <tr>
      <td>BB</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,b)}</td>
    </tr>
    <tr>
      <td>CC</td>
      <td className = 'table-container'>{formatDate(someMethod1(param1,c)}</td>
    </tr>
  </tbody>
</table>

I want to refactor the code with the same component.

Answer

I hope this would be helpful. thanks

export const TableItems = ({data}) => {
  return (
    <>
      {data.map(item => (
        <tr>
          <td>{item.name}</td>
          <td className='table-container'> {item?.symbol} {formatDate(someMethod1(param1,a)}</td>
        </tr>
      ))}
    </>
  )
}


const data = [
  {
    name: AA,
  },
  {
    name: BB,
  },
  {
    name: CC,
    symbol: '£'
  }
]

<table class="greyGridTable">
  <tbody>
    <TableItems data={data} />
  </tbody>
</table>

Advertisement

Answer