How to make a disabled option in a select, as a placeholder

Question

I tried the solution below, in theory it works, but react returns this: Warning: Use the defaultValue or value props on instead of setting selected on .

<Select>
   <OptionPlaceholder selected disabled>
         Escolha uma opção...
   </OptionPlaceholder>
</Select>

The purpose is only to remove this warning, but any other solution that ive tryied dont get me the expecting result

Answer 1

you missed a props

<option value="" disabled={this.props.defaultDisabled}>

Answer 2

You want to set the value or defaultValue attribute of the select in React instead of the selected prop of the option!

Here is an example with the value attribute:

import React, { Component } from 'react'

// ...

export default class App extends Component {
  state = {
    value: '',
  }

  handleChange = event => {
    const { value } = event.target

    this.setState({ value })
  }

  render () {
    const { value } = this.state

    return (
      <Select value={value} onChange={this.handleChange}>
        <OptionPlaceholder disabled>
          Escolha uma opção...
        </OptionPlaceholder>
      </Select>
    )
  }
}

Or take a look here

Answer 3

It's just the reference code, because you need to add an option as defaultValue and handle it during your validation if it is selected or not. Or make use of onChange handlers to modify a state variable:

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            value: '1'
        };
    }

    render(){
       return(
           <select value={this.state.value} onChange={(e)=>{this.setState({value: e.target.value})}}>
              <option value='1' disabled>Select</option>
              {
                  [2,3,4].map((i,j)=>{
                      return <option key={i} value={i}>{i}</option>
                  })
              }
           </select>
       );
    }
}