<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
orvalue
props on select instead of settingselected
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?
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!
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.
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.
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.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With