How to hide out of stock variables in drop down? by Sam Currie

I'm new to this and have got stuck on something, been searching for a few days but can't find an answer that works so thought I'd ask.

I want to hide varibles that stock is 0 on the dropdown. I think I need to add/change something in the segment below, can anyone help? I'm working from the React template.

Thanks in advance.

<form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">
        {% assign hide_default_title = false %}
        {% if product.variants.size == 1 and product.variants.first.title contains 'Default' %}
        {% assign hide_default_title = true %}
        {% endif %}  <div class="select clearfix"{% if hide_default_title %} style="display:none"{% endif %}><select id="product-select" name='id'>
            {% for variant in product.variants %}<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
            {% endfor %}</select>