React-Select: How to clear a selection value when another selection value change-CodePudding

I have two variants in my productInfo Component: Material and Size as shown at https://weiwhite.com/product/1

I am trying to clear the value of the size option when the material selection value changes

<Select value={size} onChange={setSize} options={sizeOptions} isClearable/>

The above code does not clear the previous value of the sizeOptions when material option value changes. below is the whole piece of the code

in productInfo.js

import React, {useEffect, useState} from 'react';
import { useStateValue } from '../StateProvider';
import './ProductInfo.css';
import Select from 'react-select';

function ProductInfo(props) {
    const [Product, setProduct] = useState({})
    const [{basket},dispatch]=useStateValue();

    useEffect(()=>{
        setProduct(props.detail)
      }, [props.detail])
      let minPrice=Product.variants?.map((p) => p.price)
      .sort((a,b)=>a-b)[0]

const [material, setMaterial] = React.useState();
const [size, setSize] = React.useState();

const materialOptions = Product.variants?.map((p) => p.material)
.filter((v, i, a) => a.indexOf(v) === i)
.map((material) => ({ label: material, value: material }))

const sizeOptions = Product.variants?.filter((p) => material && p.material === material.value)
.map((p) => p.size)
.filter((v, i, a) => a.indexOf(v) === i)
.map((size) => ({ label: size, value: size }));

const priceOptions = Product.variants?.filter((p) => size && p.size === size.value && material && p.material=== material.value)
.map((p) => p.price)
.filter((v, i, a) => a.indexOf(v) === i)
.map((price) => ({ label: price, value: price }));

let priceFinal={};
if (priceOptions?.length === 1){priceFinal=priceOptions[0].value}
else {priceFinal=minPrice   " "}

const addToBasket=() =>{
  //dispatch the item into the data layer
  dispatch ({
     type:'ADD_TO_BASKET',
     item: {
       id: props.detail.id, 
       title: props.detail.title,
       image: props.detail.image,
       price: priceFinal,
     },
   });
};

return (
   <div className='prod__info'>
        
    <h1>{Product.title}</h1>
    <h5 className='prod__desc'>Description</h5>
    <p className='prod__text'>{Product.desc}</p>

    <p className='prod__price'>
            <small>$</small>
            <strong> {priceFinal}</strong>
    </p>
    <br />
    {/* selection option start */}
      <p className='prod__desc'>Material</p>
      <div >
      <Select value={material} onChange={setMaterial} options={materialOptions} isClearable/>
      </div>

      <p className='prod__desc'>Size</p>
      <div >
      <Select value={size} onChange={setSize} options={sizeOptions} isClearable/>
    </div>
    <br />
    <br />
    <div className='button__cart'>    
      <button className='prod__button'
          onClick={addToBasket}
        >
            Add to basket
    </button>
    </div>

</div>

)
}

export default ProductInfo

How to clear the previous size selected value when material selected value changes?

CodePudding user response：

You can always just make a new function that does both and pass it in for the onClick

const changeMaterial = (picked) =>{
  setMaterial(picked.value);
  setSize(null)
}
<Select 
  value={material} 
  onChange={(picked)=>changeMaterial(picked)} 
  options={materialOptions} 
  isClearable
/>

or add a useEffect that sets the size back to null when the material changes:

useEffect(()=>{
  setSize(null)
},[material])