Use the defaultValue or value props on instead of setting selected on .
<select defaultValue="react">
<option value="react">React</option>
<option value="angular">Angular</option>
</select>
defaultValue would work with the above select tag. However, it does not seem to work with options generated by loop.
<select defaultValue={selectedOptionId}>
{option_id.map(id =>
<option key={id} value={id}>{options[id].name}</option>
)}
</select>
Probably options not fully been set when defaultValue was declared?
I could do manual assigning in componentDidUpdate() and onChange event.
But my question is - Is there any cleaner(better) way to solve it?
Thanks.
This is old, but since answer #1 is related to a controlled Select and the question seems to be related to uncontrolled Select I think is worth to leave some lines for future readers:
The problem is that for uncontrolled components React needs to know what are the options before the first render, since from that moment the defaultValue won't override the current value of the Select. This means that if you render the Select before the options it won't know what to select.
You can solve the problem avoiding the render before the options are available:
const RenderConditionally = ({ options, selected }) => options.length > 0 ? (
<select defaultValue={selected}>
{options.map(item => (
<option key={item.id} value={item.value}>{item.label}</option>
))}
</select>
) : null;
Or without ternary if you desire:
const RenderConditionally = ({ options, selected }) => {
if (options.length === 0) {
return null;
}
return (
<select defaultValue={selected}>
{options.map(item => (
<option key={item.id} value={item.value}>{item.label}</option>
))}
</select>
);
};
For users running into this issue, you can get the desired functionality by using the value prop, instead of defaultValue, e.g.:
<select value={selectedOptionId}>
{option_id.map(id =>
<option key={id} value={id}>{options[id].name}</option>
)}
</select>
Most probably you have something wrong with option_id and options arrays structure, or selectedOptionId variable. The way you build your select component is ok.
I've made a fiddle where this code works fine:
render: function() {
let option_id = [0, 1];
let options = [{name: 'a'}, {name: 'b'}];
let selectedOptionId = 1
return (
<select defaultValue={selectedOptionId}>
{option_id.map(id =>
<option key={id} value={id}>{options[id].name}</option>
)}
</select>
)
}
The best solution that I could find is to set key attribute the same as defaultValue so it will be a different element.
Aftermaths are not researched by me but I believe it should be okay.
Related
I'm working on a React App. I have multiple select tags and different options to display and I wrote a function that receives the options and returns the whole select tag. I call this function multiple times from the render() method. I wanted to reuse the code. For some reasons the select options and not showing.
My code is something like that:
DisplayMenu = (id, options) => {
let menu = <div className="model"> Model
<select id={id}>
{
this.options.map( (item, index) => {
<option value={index}>{item}</option>
})
}
</select>
</div>
return menu;
}
render(){
return (
<div id="main">
// other <p> elements here
<Collapsible trigger="Actors">
{this.DisplayMenu("FirstActor", this.props.Details["FirstActor"])}
{this.props.Details["OtherActors"].map ( ( item, index) =>
this.DisplayMenu("OtherActor" + index, item)
)}
</Collapsible>
//oher <button> tags here
</div>
)
}
The functions displays the select tag but options are empty. My arrays are good, I checked the values. I assumed that the cause may be the z-index value for the tag, I tried to chage it but again nothing is displayed. Also in the browser console this is displayed:
<select id="FristActor model "></select> ==$0
Any ideas will help. Thank you.
You're not returning from your map function
<select id={id}>
{
this.options.map( (item, index) => {
return <option value={index}>{item}</option>
})
}
</select>
Sorry i'm not able to comment due to less reputation.
Updating Kumar's answer if you not want to write return.
<select id={id}>
{
this.options.map( (item, index) => (
<option value={index}>{item}</option>
))
}
</select>
Thanks.
Let's say I have a function which returns a dropdown. This function gets called from some parent, where the parent passes in props including a state key, array, and onChange. The dropdown is created dynamically from the items in the array. What I want to happen is, when an option in the dropdown is selected, the parents passed in state key gets updated to the value of whatever was selected. Currently, I am trying to do this by setting an onClick handler per , which doesn't work. Instead, I am met with either no or undefined values (described more below).
Example flow:
Parent passes in aStateKey (actual state key), an array to be used as dropdown values, and an onChange function to be used to update aStateKey
The dropdown menu is created from the passed inarray
A dropdown item is selected
aStateKey (which was passed in as a prop) gets updated via the passed in onChange function.
I understand that the traditional method is to give and onChange handler, but I am having troubles working out how to get the desired described above.
Parent
state = { aStateKey: "" };
someArray = ["test", "another test"];
updateField = (name, value) => {
console.log("Updating field: " + name + " with value: " + value);
}
return(
<div>
<CreateDropdown name="aStateKey" items={this.someArray} onChange={this.updateField} />
</div>
);
CreateDropdown
function CreateDropdown(props) {
const handleClick = event => {
console.log("changed name:" + event.name + "changed value: " + event.value);
props.onChange(event.name, event.value);
};
return (
<div>
<select>
{props.items.map(field => (
<option key={field} value={field} name={props.name} onClick={handleClick}>
{field}
</option>
))}
</select>
</div>
);
}
Console log
Shows nothing! However, if I move the onClick from <option> to <select>, i.e.
return (
<div>
<select onChange={handleClick}>
{props.items.map(field => (
<option key={field} value={field} name={props.name}>
{field}
</option>
))}
</select>
</div>
);
The console shows:
Updating field: undefined with value: undefined.
changed name:undefinedchanged value: undefined
How can I achieve my desired behavior?
your target form this event is select and use onChange and here the updated function you need:
function CreateDropdown(props) {
return (
<div>
<select name={props.name} onChange={e =>
props.onChange(e.target.name, e.target.value);}>
{props.items.map(field => (
<option key={field} value={field}
{field}
</option>
))}
</select>
</div>
);
}
UPDATE #1
Inside handleClick, you are using event.name and event.value to get the target values you want.
instead use event.target.name and event.target.value
Try using onChange instead of onClick in your select element.
It belongs to select not option elements.
I'm looking for a good way to create multi select dropdowns in plain React, without using an additional library.
At present, I’m doing something like this:
<select className='yearlymeeting' multiple={true}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
selected={this.state.selectedTitles.yearlyMeetingTitles.includes(m.title) ? true : false}>
{m.title}
</option>
);
})
}
</select>
This code "works", but I'm getting this warning:
Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>.
From react docs -
You can pass an array into the value attribute, allowing you to select multiple options in a select tag:
<select multiple={true} value={['B', 'C']}>
I think you just need to pass your selected items array to value prop of select element.
Instead of checking conditions and setting "selected" props in the "option" element, directly set the value in the "select" element. The warning should go away.
<select className='yearlymeeting' multiple={true}
value={this.state.selectedTitles.yearlyMeetingTitles}>
<option value=''>Yearly Meeting</option>
{
this.state.meeting.yearly_meeting.map((m: Meeting, i: number) => {
return (
<option
value={m.title}
key={i}
{m.title}
</option>
);
})
}
</select>
Could someone please explain how to fix this error
Warning: flattenChildren(...): Encountered two children with the same
key
I have replicated my code below, but for some reason CodePen is not showing the error.
var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},
render: function() {
return (
<div className="filter-options">
<div className="filter-option">
<select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
<option value=''>Product</option>
{this.props.productOptions.map(function(option) {
return (<option key={option} value={option}>{option}</option>)
})}
</select>
</div>
</div>
);
}
});
Codepen
As a secondary question, I am pretty sure my reset is supposed to reset the values of the select boxes but this is also not working and just resetting the rendered results - not sure if this is related to the first problem?
Any help much appreciated
It is not a good idea to use the index as the key. A key is the only thing React uses to identify DOM elements. What happens if you push an item to the list or remove something in the middle? If the key is same as before React assumes that the DOM element represents the same component as before. But that is no longer true. From: https://medium.com/#robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318
It is much better to use a unique string from each item you are mapping over as the key. Something like <option key={value.id}> or if a key does not exist, create a unique identifier by doing something like <option key={value.name + value.description}>.
Adding the index as value fixed this. Thanks #azium for your sugegstion.
<select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
<option value=''>Product</option>
{this.props.productOptions.map(function(option, value) {
return (<option key={value} value={option}>{option}</option>)
})}
</select>
I'm a big fan of using key by combining index with some constant value rather than using key={value.name + value.description}:
key={'some-constant-value'+index}
This is because I can pass the key knowingly which compoent is it for. For eg. <ComponentA key={'compoent-a-'+i} />. Also, I follow this approach is because simple html convention matches like we give id="my-some-of-the-id" or something.
So, even if you want to use name and description as the key, you may use like this rather:
key={'some-constant-'+value.name+'-'+value.description}
This is just an opinion. Though, I follow html convention when writing props value.
actually you need to specify to each children a unique key,so for that you need to create another key,for example if you are getting data from the database so for that create a new column for example (id) and then add value of that column to your div or what matter you are looping on as a key
var FilterOptions = React.createClass({
changeOption: function(type, e) {
var val = e.target.value;
this.props.changeOption(val, type);
},
render: function() {
return (
<div className="filter-options">
<div className="filter-option">
<select id="product" name="Product" value={this.props.product} onChange={this.changeOption.bind(this, 'product')}>
<option value=''>Product</option>
{this.props.productOptions && this.props.productOptions.map(function(option) {
return (<option key={option.id} value={option}>{option}</option>)
})}
</select>
</div>
</div>
);
}
});
i hope this help anyone in the future.
Say I have the following React element (example fiddle here):
var Hello = React.createClass({
getInitialState: function() {
return {parsed: false};
},
_parseEvent: function(event) {
var parser1 = event.currentTarget.selectedOptions[0].value;
var parser2 = event.target.value;
var parser3 = event.nativeEvent.srcElement.value;
if (parser1 && parser2 && parser3)
this.setState({parsed: true});
},
render: function() {
var parsing = "parsing worked";
return (
<div>
<select
onChange={this._parseEvent}>
<option value="----">----</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
<p>
{ this.state.parsed ?
{parsing}
: null}
</p>
</div>
);
}
});
React.render(<Hello name="World" />, document.getElementById('container'));
I'm using three ways of parsing the value of the <select> element. The first does not work on IE 10, and I know it's a bug per my question here. However, of the other two ways, parser2 or parser3, which is the proper way to get the value of a <select> element in React? Why? Thanks for any help!
Use what you would use in a W3C compatible browser:
event.target.value
This is also agnostic to the type of the form control element.
While the other answer works just fine, if you're looking for a React way, then this can be accomplished by using refs.
Assign a ref to the select:
<select onChange={this._parseEvent} ref="select">
<option value="----">----</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
/select>
Get the DOM node via ref:
var node = React.findDOMNode(this.refs.select)
Get the value via DOM node:
var value = node.value;
Here's an updated fiddle to demonstrate: https://jsfiddle.net/ve88383c/4/