React useState within mapped parent component

Question

Im new to React and im trying to understand useState. So im pulling in an array of products and then mapping the array to display each product card:

export default function ProductList({ products }) {

  return (
        <Grid templateColumns='repeat(3, 1fr)' columnGap={6} rowGap={10}>
          {
            products.map(product => (
              <ProductCard key={product.node.id} product={product} productID={product.node.id} />
            ))
          }
        </Grid>
  )
}

and inside of my ProductCard I have a bunch of useState , to handle product options, variants, etc.

const [available, setAvailable] = useState(true)
const [selectedVariant, setSelectedVariant] = useState('')
const [selectedOptions, setSelectedOptions] = useState('')
const { addToCart } = useContext(CartContext)

So my question is, do each of the ProductCard actually share the same useState, even though they are being mapped?

Answer 1

You map collection of separate components, they won't share logic or state. State is hermetic and other components wont have access to it unless allowed to.