2 questions.. first is i want the text to change in condition and the other is the button cant be click if meet the condition

this is the sample code of what I'm trying to do.. on the condition "detailProduct.stock == 0". I want it to change the text if the condition is met. but the thing is only "Equipment Available" appears and "Out of Stock" never appears.. also my button. "Buy Now" I want it to be disabled if the stock = 0 like what I want in my first question. It's kind of hard to find and experiment with some syntax so ill ask here thanks!

Are you sure the value of detailProduct.stock is zero?

for button instead of using the Link element , try to use button itself and in the onClick event use navigate from react-router-dom

function TestElement(){
    const navigate = useNavigate()
    const [detailProduct, setDetailProduct] = useState({stock: 0})
    const handleClick=()=>{
        // handle your logic
        navigate('/cart') // react-router-dom v6
    
    }
    
    return(
        <div>
            <button onClick={handleClick} disabled={detailProduct.stock === 0}>
                Buy Now
            </button>
        </div>
    )
}