Create props for table

[Wanhenri]

I need to pass the parameters through the component

[Wanhenri]

    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>    
    );

[Wanhenri]

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>    
    );

[Wanhenri]

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>    
    );

[Wanhenri]

The solution at the moment

          {posts.product&&(
          <>           
          <SimpleTable 
              product={posts.product}
              id="ID" 
              name="Product" 
              code="Code" 
              price="Price" 
              button="Add Product" 
              path="/product"/>          
          </>
          )}

[Wanhenri]

I created two components.