如何在react js中使用布尔值更改默认值

Question

我正在使用 react.js 创建应用程序，

现在如何在 react.js 中动态设置默认价格值 但是，每当我单击大小（按钮）时，我的代码中只应动态更改默认值，以便大小值也会更改

 
   <span className="price">
      <ul className="nav">                             
         <ul>
            {checkout_product.Product_attributes.map(
            (childPropKey, index) => {
            if (
            childPropKey.product_id ==
            checkout_product.id
            ) {
            return (
            <ins>             
            <span
               ref={counterEl}
               className="amount"
               defaultvalue={checkout_product.element} 
               >                              
            {data.price == childPropKey.price
            ? childPropKey.price
            : index == 0
            ? childPropKey.price
            : ""}
            </span>
            </ins>
            );
            }
            }
            )}
         </ul>
      </ul>
      {/* ))} */}
   </span>
   <div className="product-size mt-3">
      {product_attributes.map((value, key) => (
      <ul className="nav">
         <ul>
            {value.Product_attributes.map(
            (childPropKey, index) => {
            if (
            childPropKey.product_id ==
            checkout_product.id
            ) {
            return (
            <li
            data-id={index}
            className={
            childPropKey.attribute.value ===
            data.attribute
            ? "active"
            : index == 0
            ? "active"
            : ""
            }
            onClick={(e) =>
            clickHandler(
            childPropKey.attribute.value,
            childPropKey.price,
            index
            )
            }
            >
            {childPropKey.attribute.value}
            </li>
            );
            }
            }
            )}
         </ul>
      </ul>
      ))} 
</div>

如何在 React.js 中修复这个问题？？？