CODEWITHSUNDEEP
reactjs
Kal
Kal

Reputation: 1774

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

How to resolve this warning?

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

This has been asked once before but the solution does not help me. I cannot set selected because the value here is from a Redux state (if present). If redux state has no values, it should show default option - "Select gender"

Here is my code:

import React, { Component } from 'react'
import InputGender from '../../edit-profile/gender-input'
...
...

<InputGender value={gender} change={this.change} />

And here is InputGender

import React from 'react'
import PropTypes from 'prop-types'
import Select from '../others/input/select'

const InputGender = ({ value, change }) => (
  <div className="edit_gender_div">
    <Select
      placeholder="Select option"
      value={value}
      valueChange={e => change('gender', e)}
      className="edit_gender mb-2"
    >
      <option value="" disabled selected>
        Select Gender
      </option>
      <option>Male</option>
      <option>Female</option>
      <option>Other</option>
    </Select>
  </div>
)

InputGender.propTypes = {
  value: PropTypes.string.isRequired,
  change: PropTypes.func.isRequired,
}

export default InputGender

Upvotes: 5

Views: 15767

Answers (5)

Bisrat
Bisrat

Reputation: 121

<Select
  value={value}
  valueChange={e => change('gender', e)}
  className="edit_gender mb-2"
>
  <option defaultValue>
    Select Gender
  </option>
  <option value="Male">Male</option>
  <option value="Female">Female</option>
  <option value="Other">Other</option>
</Select>

if you want to disable select Gender just use

<option defaultValue disabled>
    Select Gender
  </option>

this code will resolve the warning.

Upvotes: 0

Dilshan
Dilshan

Reputation: 1

Remove selected attribute from option. The value props will set the selected value in the option automatically handled by react.

Upvotes: 0

Ali Torki
Ali Torki

Reputation: 2038

If you want to select an option case, you need to write goal option value into the value depended on the select tag like this:

<select value="first">
  <option value="first">First</option>
  <option value="second">Second</option>
</select>

As I know, if you want to capture onChange hook on every form tag, you need to use the onChange attr for every form's input. So please change it to this:

<Select
      placeholder="Select option"
      value={value}
      onChange={e => change('gender', e)}
      className="edit_gender mb-2"
    >
 ...

Upvotes: 0

Amruth
Amruth

Reputation: 5912

You have to make some changes.

send '' if you want to select disabled option or gender value to select other values <InputGender value={gender} change={this.change} />

And options should be like this.

<option value="" disabled>{/* no need of selected */}
    Select Gender
  </option>

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85573

Remove selected attribute from option. The value props will set the selected value in the option automatically (handled by react).

<option value="" disabled selected>
{/* remove selected attribute ^^ */}

It should just be:

<option disabled>

Upvotes: 5

Related Questions