How to Use selected in Next.js/React.js?

Title: Use the defaultValue or value props on <select> instead of setting selected on <option>.

Author: Umair Anwar

Subject: Javascript

Language: English

Source: StackOverflow

Introduction

The warning message you've encountered,

Warning: Use the defaultValue or value props on <select> instead of setting selected on <option>

is typically related to how you're working with HTML <select> elements in a web development context, particularly in the context of React or other JavaScript frameworks.

This warning advises you to set the selected option for a <select> element using the defaultValue or value props on the <select> itself, rather than setting the selected attribute on the individual <option> elements within the <select>. Here's how you should use it:

Using defaultValue (for uncontrolled components):

<select defaultValue="option2">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

Using value (for controlled components):

const [selectedOption, setSelectedOption] = useState("option2");
<select value={selectedOption} onChange={(e) => setSelectedOption(e.target.value)}>
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

In the uncontrolled component example, you can use the defaultValue prop to set the initially selected option. In the controlled component example, you are using state to manage the selected option and update it when the user makes a selection.

The warning is often associated with React or other similar JavaScript frameworks because these libraries encourage a more declarative approach to managing the state and rendering of components. By using defaultValue or value, you ensure that the component's state and the rendered DOM are in sync, preventing unexpected behavior.