How can i display option dynamically in react

Seems like your product.countInStock value type is String. That's why you didn't get the preferable result. If you passing the String value into array, the output of this code [...Array(product.countInStock).keys()] is 0. Your string value take as one element of Array. Because of that in your select option list it will show only "1".

To convert product.countInStock this value into integer value you can use parseInt() method. whole code snippets like this,

<select value={qty} onChange={e => setQty(e.target.value) }>
    {[...Array(parseInt(product.countInStock)).keys()].map(
        (x) => (
            <option key={x + 1} value={x + 1}>{x + 1}</option>
        )
    )}
</select>

Make sure your product.countInStock is Integer value to get the your preferable result.

Your code seems to work if the countInStock is updated properly.

Note that if the product is part of your state, you might need to return a new product object with the updated value of countInStock to trigger proper change detection. this.setState({product: {...product, countInStock: newValue}}) or setProduct({..product, countInStock: newValue}) depending on whether you use class or functional components.

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [product, setProduct] = useState({ countInStock: 2 });
  const setProductCount = (e) =>
    setProduct({ ...product, countInStock: +e.target.value });
  return (
    <div>
      <div>
        Set Product count:
        <select onChange={setProductCount}>
          <option value="1"> 1 </option>
          <option value="2"> 2 </option>
          <option value="3"> 3 </option>
        </select>
      </div>
      <div>
        Product count dropdown
        <select>
          {[...Array(product.countInStock).keys()].map((x) => (
            <option key={x + 1} value={x + 1}>
              {x + 1}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

So I am working on some e-commerce tools on react and ts. Figuring mostly everything from scratch regarding ts/tsx.

This might solve your issue

 <select
           value={qty}
                    onChange={(e) => setQty(parseInt(e.target.value))}
                  >
                    {[...(Array(product.countInStock).keys() as any)].map(
                      (x) => (
                        <option key={x + 1} value={x + 1}>
                          {x + 1}
                        </option>
                      )
                    )}
                  </select>