title: how to get product id from sanity.io for every button that clicked in reactjs?
body: <p>i'm trying to make product detail page but i am struggle to solve this problem. I fetch products from sanity.io and return the data using map. i want whenever i click the detail btn it's direct me to detail page and get the information of product</p>
  <p>here is my code</p>
  <pre><code>const Products = () =&gt; {
    const [allProducts, setAllProducts] = useState([]);
  
    useEffect(() =&gt; {
      async function getAllProducts() {
        const allProduct = '*[_type == &quot;product&quot;]';
        const response = await client.fetch(allProduct);
        setAllProducts(await response);
      }
      getAllProducts();
    }, []);
  
    return (
      &lt;&gt;
        &lt;Navbar /&gt;
        &lt;div className=&quot;container-fluid &quot;&gt;
          &lt;div className=&quot;row g-3 mb-5 &quot;&gt;
            {allProducts.map((product) =&gt; {
              console.log(product);
              return (
                &lt;div className=&quot;col-12 col-md-3&quot; key={product._id}&gt;
                  &lt;div className=&quot;card&quot;&gt;
                    &lt;img
                      src={urlFor(product.image[0])}
                      className=&quot;card-img-top&quot;
                      alt={product.name}
                    /&gt;
                    &lt;div className=&quot;card-body&quot;&gt;
                      &lt;h1&gt;${product.price}&lt;/h1&gt;
                      &lt;h5 className=&quot;card-title&quot;&gt;{product.name} &lt;/h5&gt;
                      &lt;h6&gt;{product.detail}&lt;/h6&gt;
                      &lt;div&gt;
                        &lt;Link to=&quot;/detail&quot; className=&quot;btn btn-danger m-2&quot;&gt;
                          Detail
                        &lt;/Link&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      &lt;/&gt;
    );
  };
  </code></pre>