App.js

import { useState } from 'react';
import './App.css';


const PRODUCTS = [
  {category: "Fruits", price: "$1", stocked: true, name: "Apple"},
  {category: "Fruits", price: "$1", stocked: true, name: "Dragonfruit"},
  {category: "Fruits", price: "$2", stocked: false, name: "Passionfruit"},
  {category: "Vegetables", price: "$2", stocked: true, name: "Spinach"},
  {category: "Vegetables", price: "$4", stocked: false, name: "Pumpkin"},
  {category: "Vegetables", price: "$1", stocked: true, name: "Peas"}
];


function App() {

  return (
    <div className="App">    
        <FormProducte /> 
        <ProductTable products={PRODUCTS}/>
    </div>
  );
}


function ProductRow({ product }) {  

  return (
    <tr>
      <td>{product.name}</td>
      <td>{product.price}</td>
    </tr>
  );
}


function ProductTable({ products }) {
  const rows = [];
  
  products.forEach((product) => {
    rows.push(
      <ProductRow product={product} />
    );   
  });

  return (
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Price</th>
        </tr>
      </thead>
      <tbody>
        {rows}
      </tbody>
    </table>
  );
}





function FormProducte() {
  
  const [producte, setProducte] = useState( {category: "", price: "", stocked: true, name: ""}, );
  
  const handleChange = (input) =>  {      
    setProducte( {...producte, [input.name]: input.value })
  }

  const handleSave = () => {
    
  }

  return (
    <>
      <form>
        Name: <input type="text" name="name" value={producte.name} 
                 onChange={ (event) => { handleChange(event.target)  }}/>

        Category: <select name="category" value={producte.category} 
               onChange={ (event) => { handleChange(event.target)  }}>
                    <option>Fruits</option>
                    <option>Vegetables</option>
                  </select>
        
        Price: <input type="text" name="price" value={producte.price} onChange={ (event) => { handleChange(event.target)  }}/>
       
        <input type="button" value="Save" onClick={handleSave}></input>

      </form>   
      { producte.name } { producte.category }   { producte.price }   
  </>
  )
}

export default App;