Master details

master-details.js

const PRODUCTS = [
  { id: 1, name: "Potato chips", description: "Deliciousness" },
  { id: 2, name: "Glue", description: "Do not smell" }
]

function Master(props) {
  return PRODUCTS.map(product => (
    <button onClick={() => props.onClickProduct(product)} key={product.id}>
      {product.name}
    </button>
  )
}

function Details(props) {
  return (
    <div>
      <h1>{props.product.name}</h1>
      <p>{props.product.description}</p>
    </div>
  )
}

function Page() {
  const [selectedProduct, setSelectedProduct] = useState({})
  
  return (
    <div>
      <Master onClick={setSelectedProduct} />
      <Details product={selectedProduct} />
    </div>
  )
}