Suggestion to refactor code into simple way -React

user_6146203 0
Viewed 77

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.

react-redux react-hooks reactjs ecmascript-6 javascript
2 Answers

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>
user_135678070

Try to use an array instead. Having reusable components in an array is easy to maintain, expand and read. Definitely a good practice.

let tableItems = [{name:"AA",date:new Date()},.....]

return (

<table class="greyGridTable">
  <tbody>
    {tableItems.map((item,index)=>{
     return(
       <tr>
         <td>{item.date}</td>
         <td className = 'table-container'>{item.date}</td>
       </tr>
     )
    })}
  </tbody>
</table>

)
user_164645650
Related