close

[Solved] Warning: Use the ‘defaultValue’ or ‘value’ props on select instead of setting ‘selected’ on option

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?

  1. 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 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.

  2. 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

Leave a Comment