I am trying to make dropdown but I am facing this warning error. Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option in ReactJS. In this Exerror article, We are going to learn about How to reproduce this error and we will discuss All Possible Solutions Lets Get Start with This Article.
How Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option Error Occurs?
I am trying to make dropdown but I am facing this warning error.
Warning: Use the 'defaultValue' or 'value' props on <select> instead of setting 'selected' on <option>
So here I am writing all the possible solutions that I have tried to resolve this error.
How To Solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option Error?
- How To Solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option Error?
To Solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option Error Just make sure that
value
anddefaultValue
should match thevalue
of the option. a Value that you are trying to use as defaultValue must be in your Option with value. and now your error will be solved. - Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option
To Solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option Error To solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option You Just need to set defaultValue to your Select tag. When You are working with dropdown You need to give it defaultValue Because when it renders for the first time this defaultValue will be selected as default and If you are Not Giving Default value then your default selected value will be null. And now, by adding the Default value your warning error will be solved. Thank you.
Solution 1: set defaultValue
To solve Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option You Just need to set defaultValue to your Select tag. When You are working with dropdown You need to give it defaultValue Because when it renders for the first time this defaultValue will be selected as default and If you are Not Giving Default value then your default selected value will be null. Just add defaultValue like the below code.
<select defaultValue={'DEFAULT'} >
<option value="DEFAULT" disabled>Choose a Your Standerd...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
And now, by adding the Default value your warning error will be solved. Thank you.
Solution 2: Make Sure
Just make sure that value
and defaultValue
should match the value
of the option. a Value that you are trying to use as defaultValue must be in your Option with value. and now your error will be solved.
Conclusion
It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?
Also, Read
- ‘X’ is not defined react/jsx-no-undef
- Uncaught TypeError: Cannot read property ‘pathname’ of undefined
- Error: only absolute urls are supported
- How to use create-react-app with an older React version?
- How to display SVG image in React Component?