select dropdown option set to default when click reset button on react js

Question

I am working on a dropdown select filter and there is a reset button, so I want to reset data whenever I click on it. this is my select dropdown where I am filtering data

<select
    className={style.input}
    name="categoryId"
    onChange={e => handleCategory(e.target.value)}
>
    <option value="" disabled selected>
        Select A Categtory
    </option>
    {props.category_list && props.category_list.length > 0
        ? props.category_list.map((item, index) => (
              <option value={item.categoryId}>{item.categoryName}</option>
          ))
        : null}
</select>

this is onChange method of select

 const handleCategory = (value) => {
    setErrorMsg(null);
    setCategoryID(value);
    props.getSubCategoryList(value);
  };

and this is a reset button, I tried to make

  const handleReset = (value) => {
    setReset(true);
    setCategoryID('');
    setSkillID('');
    setLocationId('');
    props.getSubCategoryList(1);
  };

but the problem is when I click on reset it resets, but the value doesn't change to default one in options also if I change it in {item.categoryName} then three same values appear under options. hope this information is enough.

Amila Senadheera · Accepted Answer · 2022-02-08 08:07:24Z

1

You need to bind the selected value to select element.

Provide categoryID as a prop to your component.
Set it as the value property of select.

<select
    ...
    ...
    value={props.categoryID}
    onChange={e => handleCategory(e.target.value)}
></select>

answered Feb 8, 2022 at 8:07

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Amila Senadheera Over a year ago

@How to Program, check this out !!

Collectives™ on Stack Overflow

select dropdown option set to default when click reset button on react js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related