Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set placeholder for dropdown in react js?

<select>
     <option selected disabled>Select</option

I added an extra option with a disabled property, but this gives me the following warning:

Use the defaultValue or value props on select instead of setting selected on option.

<select>
    {this.props.optionarray.map(function(e){
        return <option 
                   value={e[self.props.unique]} 
                   key={e[self.props.unique]}
               >
                   {e[self.props.name]}
               </option>
    })}
</select>

optionarray is an array which is passed through props to be mapped on each index which has an object and I pass the key through props as well which was in the array. Everything is working here, it's just showing me the warning that I mentioned above.

How do I remove that or how do I set a perfect placeholder for a dropdown in react?

like image 575
Vaibhav Shukla Avatar asked Feb 18 '17 13:02

Vaibhav Shukla


People also ask

How do you give a placeholder in React?

Use the placeholder prop to set a placeholder on an input field in React, e.g. <input type="text" placeholder="Your first name" /> . The placeholder text of an input field is shown until the user types something in the field. Copied!

How add placeholder in select tag in React?

To set a placeholder to a select tag, we can use the <option> element followed by the disabled and hidden attributes. In the above code, we first set a useState() hook intial-value to default and added a value="default" to the “Choose your car” option so that it acts as placeholder for the select tag.

How do you set a dropdown value in React?

To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null . to set onChange to a function that calls setSelected to e. target. value which is the selected value if it's truthy.

What is placeholder in React?

A placeholder is used to reserve space for content that soon will appear in a layout. Placeholders can include PlaceholderParagraph , PlaceholderHeader , and PlaceholderImage to let you format the loaders to emulate the content being loaded.


1 Answers

Reason is, React provide a better way of controlling the element by using states, so instead of using selected with option use the value property of select and define its value in the state variable, use the onChange method to update the state, Use it in this way:

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>
       );
    }
}

How to set placeholder for dropdown?

According to Mozilla Dev Network, placeholder is not a valid attribute on a <select>. So in place of that you can you this also to render a default option:

<option default>Select</option>

Use of key as per DOC:

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity.

Suggestion:

Whenever we create any ui dynamically in loop, we need to assign a unique key to each element, so that react can easily identify the element, it basically used to improve the performance.

Check the working example:

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>
   );
}
}

ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

Check the fiddle for working example: https://jsfiddle.net/29uk8fn0/

like image 135
Mayank Shukla Avatar answered Oct 20 '22 09:10

Mayank Shukla