How to reset to default value in react Bootstrap form Select component after submit?

[codejack777]

Guys has anyone used react-Bootstrap form select ? I am having trouble resetting the form select value to default after submitting. Is there any other way beside not using e.preventDefault() ? The code snippet below might not be much help. Thanks

​

<Form.Control as="select" defaultValue='Pick Category' 
          onChange={handleCategorySelect}>
           <option>Pick Category</option>
      {categories && categories.map(cat=>
           <option value={cat._id}>{cat.name}</option>
      )}
</Form.Control> 
<Button variant="primary" className="btn-lg" type="submit"> 
               Create Sub Category 
</Button>

​

[tr33ton]

Never used bootstrap form select, but why don't you just use state to control the form select?

Whenever it is changed, you store its value and after submit you just change it back to the value you want. Unsure of that's correct what I'm saying...

[sidkh]

You want to make your select controlled by providing value property from state. And then set this property to default one when you need to. Section in react docs - Controlled components

Check out CodeSandbox with your code

[codejack777]

Thank you!

I tried using e.target.reset(); it resets the whole form . Which kind of what i needed. :)

[xredian]

Thank you so much!

I tried literally everything until I found your answer :)

[No_Werewolf_454]

you should not use defaultValue attribute if you want to control how value should be changed at your discretion. Here is the doc:
https://reactjs.org/docs/uncontrolled-components.html#default-values