Как заставить работать кнопку «Сбросить всё» для нескольких экземпляров React-select?

Question

[blew_sweet]

Решил использовать библиотеку react-select, задача такова, есть калькулятор, где несколько select. И никак не могу настроить кнопку "Сбросить всё", чтобы все значения обнулились. Нашел пример для одного select, но когда их много, прописывать каждому уникальные значения не релевантно.

handleChange должен обрабатывать изменения, а handleClick занулять, change вроде работает нормально, а вот при клике ничего не происходит, хотя если посмотреть в консоли, то сам объект сбрасывается.

Компонент калькулятора

export const Calculator = () =>{
  const options = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
  ];

  const [value,setValue] = useState({})

  const flags = [
    {id: 'first', text:'Включить цену за проживание'},
    {id: 'second', text:'Варианты со скидкой'}
  ]

  const handleChange = (val,actionMeta) => {
    setValue({
      ...value,
      [actionMeta]: val
    })
  }
  const handleClick = () => setValue({})

  return (
    <aside className={classes.calculator}>
      <h4 className={classes.title}>
        Что хотите найти?
      </h4>
      <form onSubmit={(e)=>{
        e.preventDefault()
      }} className={classes.form}>
        <div className={classes.fields}>
          <div className={classes.field}>
            <div className={classes.subtitle}>Язык</div>
            <CustomSelect propValue={value} options={options} onChange={handleChange} name={'string'} id={1}  placeholder={'На каком языке?'} styles={customStyles}/>
            {JSON.stringify(value)}
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Страна</div>
            <CustomSelect  propValue={value['2'] } onChange={handleChange} name={'2'} id={2} placeholder={'На каком языке?'} styles={customStyles}/>
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Город</div>
            <CustomSelect  propValue={value['3'] } onChange={handleChange} name={'3'} id={3} placeholder={'Какой город?'} styles={customStyles}/>
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Возрастная группа</div>
            <CustomSelect propValue={value['4']} onChange={handleChange} name={'4'} id={4} placeholder={'Какой возраст?'} styles={customStyles}/>
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Продолжительность обучения</div>
            <CustomSelect  propValue={value['5']} onChange={handleChange} name={'5'} id={5} placeholder={'Долго?'} styles={customStyles}/>
          </div>
          <div className={classes.field}>
            <div className={classes.subtitle}>Количество учеников в классе</div>
            <CustomSelect  propValue={value['sum']} onChange={handleChange} name={'sum'}  id={6} placeholder={'Кол-во учеников?'} styles={customStyles}/>
          </div>
        </div>
        <div className={classes.feePerWeek}>
          <div className={classes.feePerWeek}>
            <div className={cn(classes.subtitle, classes.subtitleBigMargin )}>
              Стоимость обучения за неделю
            </div>
            <MultiRangeSlider min={0} max={1000}/>
          </div>
        </div>
        <div className={classes.flags}>
          <Checkbox id={flags[0].id} text={flags[0].text}/>
          <Checkbox id={flags[1].id} text={flags[1].text}/>
        </div>
        <CalculatorParameters onChange={handleChange} customStyles={customStyles} fieldValue={value}/>
        <div className={classes.buttons}>
          <button type={'submit'} className={classes.submit}>Применить</button>
          <button className={classes.resetButton} onClick={handleClick}>Сбросить все</button>
        </div>
      </form>
    </aside>
  )
}

Компонент CustomSelect

export const CustomSelect = ({placeholder,id,propValue,onChange, options, styles,name}) =>{
  const initialOptions = [
    { value: 'chocolate', label: 'Chocolate' },
    { value: 'strawberry', label: 'Strawberry' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
    { value: 'vanilla', label: 'Vanilla' },
  ];
  const [value,setValue] = useState(propValue)
  useEffect(()=>{
    setValue(propValue)
  }, [propValue])

  const handleOnChange = ({value}) => {
    if (typeof onChange ==='undefined') {
      return null
    } else {
      onChange(value, name)
    }
  }
  return (
    <Select onChange={handleOnChange} name={name} value={value} instanceId={id} placeholder={<span>{placeholder}</span>}  styles={styles || customStyles} options={options ?? initialOptions} />
  )
}

Answer 1

[0xD34F]

Select в качестве value принимает объект, массив объектов или null, а вы ему строку пытаетесь подсовывать (свойство value элемента массива options). Храните в качестве выбранных значений объекты, в обработчике события onChange не надо выдёргивать value из первого параметра, сохраняйте его целиком; или внутри CustomSelect выполняйте поиск нужного option'а по его value и передавайте найденное (или null, если поиск результатов не дал) в Select вместо строкового значения, получаемого из родительского компонента.

https://stackblitz.com/edit/react-ujjfee?file=src%...

Answer 2

[ParaBellum577]

Не вижу, чтобы handleClick вообще вызывался, propValue у вас undefined, вы его не передаете в компонент. Советую вам выводить в консоль пропсы, которые вы передаете в компоненты, тогда будет наглядно понятно, где есть ошибки.

Comments

[blew_sweet]

handleClick я не добавил, потому что там просто кнопка с этим событием
В компоненте много лишнего кода, но давайте отредактирую вопрос, чтобы было точно ясно

[blew_sweet]

Поправил вопрос, чтобы было точное понимание текущего состояния