Javascript 如何在特定条件下进行隐藏和显示

目前我正在开发React/Redux，我的项目是一个电子商务应用程序，有两种支付方式，即现金和卡支付，现在我的产品显示页面中显示了两种支付方式，即现金和卡支付，我想做一个功能，如果产品价格超过10000，我可以隐藏现金图标，付款方式图标来自静态CSS sprite，有人能帮我实现这个功能吗，提前谢谢，我的产品显示页面和我的反应代码显示在下面

---

案例“保修和付款方式”：
/*保修/付款方式*/
子组件=(
{要约&&
保修&&

{I18n.getText（'product.warranty'，{}，'warranty'）}


{offer.warranty}

}
{/*付款方式开始*/}

{I18n.getText（'product.payment'，{}，'payment'）}

{/*付款方式*/}

现金
visa
万事达卡
美国运通

{/*支付方式结束*/}
);

---

与其他元素相同：

                        {/* PAYMENT METHODS */}
                        <ul className="paymentMethods">
                            {price <= 10000 && <li className="cash">Cash</li>}
                            <li className="visa">Visa</li>
                            <li className="mastercard">Mastercard</li>
                            <li className="amex">American Express</li>
                        </ul>

{/*付款方式*/}

{你知道如何触发组件的状态更改吗？
                        {/* PAYMENT METHODS */}
                        <ul className="paymentMethods">
                            {price <= 10000 && <li className="cash">Cash</li>}
                            <li className="visa">Visa</li>
                            <li className="mastercard">Mastercard</li>
                            <li className="amex">American Express</li>
                        </ul>