Closed Wanhenri closed 4 years ago
const parameters = [
{
id: 1,
name_id: "ID",
name:"Product",
code:"Code",
price:"Price",
button:"Add Product",
path:"/product"
},
{
id: 2,
name_id: "ID",
name:"Vendor",
code:"CNPJ",
price:"City",
button:"Add Vendor",
path:"/vendor"
},
]
return (
<Wrapper >
{parameters.map((itens) =>(
<SimpleTable key={itens.id} id={itens.name} name={itens.name} code={itens.name} price={itens.name} button={itens.name} path={itens.name}/>
))}
</Wrapper>
);
Refactoring:
const parameters = [
{
id: 1,
name_id: "ID",
name:"Product",
code:"Code",
price:"Price",
button:"Add Product",
path:"/product"
},
{
id: 2,
name_id: "ID",
name:"Vendor",
code:"CNPJ",
price:"City",
button:"Add Vendor",
path:"/vendor"
},
]
return (
<Wrapper >
{posts.product&&posts.product.map(w => (
<h1>{w.id}</h1>
))}
{parameters.map((itens) =>(
<SimpleTable
key={itens.id}
id={itens.name}
name={itens.name}
code={itens.name}
price={itens.name}
button={itens.name}
path={itens.name}/>
))}
</Wrapper>
);
using spread operator (...):
const parameters = [
{
id: 1,
name_id: "ID",
name:"Product",
code:"Code",
price:"Price",
button:"Add Product",
path:"/product"
},
{
id: 2,
name_id: "ID",
name:"Vendor",
code:"CNPJ",
price:"City",
button:"Add Vendor",
path:"/vendor"
},
]
return (
<Wrapper >
{posts.product&&posts.product.map(w => (
<h1>{w.id}</h1>
))}
{parameters.map((itens) =>(
<SimpleTable
key={itens.id}
{...itens}
/>
))}
</Wrapper>
);
The solution at the moment
{posts.product&&(
<>
<SimpleTable
product={posts.product}
id="ID"
name="Product"
code="Code"
price="Price"
button="Add Product"
path="/product"/>
</>
)}
I created two components.
I need to pass the parameters through the component