How to apply an id attribute to a child element of a ReactJS component?
32,642
Solution 1
props
will contain the ID from the Dropdown
component, but since you're within a React component use this.props
.
return (
<select
id={this.props.id}
value={this.state.value}
onChange={this.handleChange}
disabled={disabled}
>
{dropdownOptions}
</select>
)
Solution 2
You should add id={option.id} to your if/else and also on you return. Note: that in your Anish class you are passing id="dropdownId1" as a prop. Not sure if that's intended.
if (options) {
dropdownOptions = this.props.options.map((option) =>
<option value={option.key} id={option.id} key={option.key} >{option.display}</option>,
);
} else {
// Setting default options
const defaultOptions = [
{ key: '', display: 'Please configure defaultOptions' },
];
disabled = true;
dropdownOptions = defaultOptions.map((option) =>
<option id={option.id} value={option.key} key={option.key} >{option.display}</option>,
);
}
return (
<select
value={this.state.value}
onChange={this.handleChange}
disabled={disabled}
id={option.id}
>
{ dropdownOptions }
</select>
);
// Dont forget to add id to propTypes
id: React.PropTypes.string,
Author by
Ralph David Abernathy
Updated on February 02, 2022Comments
-
Ralph David Abernathy over 2 years
So I have a dropdown component:
import React from 'react'; import { PropTypes } from 'prop-types'; export default class Dropdown extends React.Component { constructor(props) { super(props); this.state = { value: this.props.selectedDropdownValue, }; this.handleChange = this.handleChange.bind(this); } handleChange(e) { this.setState({ value: e.target.value, }); this.props.onChange(e.target.value); } render() { let disabled = false; let dropdownOptions = null; const { options } = this.props; // Disable dropdown is the disabled attribute is added if (options) { dropdownOptions = this.props.options.map((option) => <option value={option.key} key={option.key} >{option.display}</option>, ); } else { // Setting default options const defaultOptions = [ { key: '', display: 'Please configure defaultOptions' }, ]; disabled = true; dropdownOptions = defaultOptions.map((option) => <option value={option.key} key={option.key} >{option.display}</option>, ); } return ( <select value={this.state.value} onChange={this.handleChange} disabled={disabled} > { dropdownOptions } </select> ); } } Dropdown.propTypes = { options: PropTypes.arrayOf(PropTypes.object), onChange: PropTypes.func, selectedDropdownValue: PropTypes.string, }; Dropdown.defaultProps = { options: undefined, onChange: this.handleChange, selectedDropdownValue: '', };
And here is how I'm rendering the dropdown in my view:
import React from 'react'; import { PropTypes } from 'prop-types'; import Dropdown from 'components/Dropdown'; class Anish extends React.Component { render() { return ( <div> <div> Value Selected: {this.props.selectedDropdownValue} </div> <label htmlFor={'dropdownId1'}>Sort by: </label> <Dropdown id="dropdownId1" options={[ { key: '', display: 'Please select a value' }, { key: 'NJ', display: 'New Jersey' }, { key: 'NY', display: 'New York' }, ]} onChange={this.props.onSetDropdownValue} /> </div> ); } } Anish.propTypes = { selectedDropdownValue: PropTypes.string, onSetDropdownValue: PropTypes.func.isRequired, }; Anish.defaultProps = { selectedDropdownValue: '', }; export default Anish;
Here is how the dropdown and label are rendered in the browser:
So how can I apply the id that's on
<Dropdown />
to the<select>
inside of it?Any help is appreciated.