I don’t know if I understand your question very well. But it would be like this?
<tbody>
{props.item.map((film) => (
<tr>
{ Object.keys(film).map((chaveDeObj) =>
(<td>{film[chaveDeObj]}</td>) }
</tr>
))}
</tbody>
could also create an object <thead>
using the chaveDeObj
as value. This freeVoce swap the object film
to anyone without knowing its contents. Of course this only works with simple objects, more than to modify to deal with more complex objects.
The right and have some kind of filter to not demonstrate values that are not necessary.
You can do something like this:
import React from 'react';
// props: { filtro: string[]; itens: any[] }
const genericTable = (props) => {
const filtrosDeChaves = props.filtro; // ex.: ['nome', 'data']
return (
<>
<thead>
<tr>
{filtrosDeChaves.map((chave) => (
<td key={chave}>{chave}</td>
))}
</tr>
</thead>
<tbody>
{props.itens.map((
item, // mudei o nome do obj para itens
index // estou usando index para key mais o certo seria outro valor
) => (
<tr key={index}>
{Object.keys(item)
.filter(
// filtrar para valores desejados
(chaveDoItem) => filtrosDeChaves.includes(chaveDoItem)
)
.map((chaveDoItem) => (
<td key={chaveDoItem}>{item[chaveDoItem]}</td>
))}
</tr>
))}
</tbody>
</>
);
};
Got it, helped me a lot. Thanks a lot!
– João Amaral