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.
JavaScript
x
17
17
1
<table class="greyGridTable">
2
<tbody>
3
<tr>
4
<td>AA</td>
5
<td className = 'table-container'>{formatDate(someMethod1(param1,a)}</td>
6
</tr>
7
<tr>
8
<td>BB</td>
9
<td className = 'table-container'>{formatDate(someMethod1(param1,b)}</td>
10
</tr>
11
<tr>
12
<td>CC</td>
13
<td className = 'table-container'>{formatDate(someMethod1(param1,c)}</td>
14
</tr>
15
</tbody>
16
</table>
17
I want to refactor the code with the same component.
Advertisement
Answer
I hope this would be helpful. thanks
JavaScript
1
33
33
1
export const TableItems = ({data}) => {
2
return (
3
<>
4
{data.map(item => (
5
<tr>
6
<td>{item.name}</td>
7
<td className='table-container'> {item?.symbol} {formatDate(someMethod1(param1,a)}</td>
8
</tr>
9
))}
10
</>
11
)
12
}
13
14
15
const data = [
16
{
17
name: AA,
18
},
19
{
20
name: BB,
21
},
22
{
23
name: CC,
24
symbol: '£'
25
}
26
]
27
28
<table class="greyGridTable">
29
<tbody>
30
<TableItems data={data} />
31
</tbody>
32
</table>
33