How to make a Dropdown with specific values in ReactJS?
Multi tool use
How to make a Dropdown with specific values in ReactJS?
I am using the Dropdown of PrimeReact.
Dropdown
PrimeReact
I have this code, but in the Dropdown I only get to show the label and not the name.
Dropdown
label
name
How can I display the name of each element of the optionsSearch variable in the Dropdown menu to select these names?
optionsSearch
Dropdown
import React, {Component} from 'react';
import {Dropdown} from 'primereact/components/dropdown/Dropdown';
class OptionsExample extends Component {
constructor(props) {
super(props);
this.state = {
optionsSearch: 'FORM_FIELDS'
};
}
onOptionChange = e => {
this.setState({optionsSearch: e.value});
}
render() {
const optionsSearch = [
{key: 'NAME1', name: 'NAME1', label: 'DESCRIPTION1'},
{key: 'NAME2', name: 'NAME2', label: 'DESCRIPTION2'},
{key: 'NAME3', name: 'NAME3', label: 'DESCRIPTION3'}
];
return (
</div>
);
}
}
export default OptionsExample;
optionLabel="name"
<Dropdown>
It's just that I needed it! Thank you very much!!
– Belen Dominguez Garcia
Jul 3 at 10:03
1 Answer
1
This code is copied from PrimeReact source code for dropdowns..
https://github.com/primefaces/primereact/blob/master/src/components/dropdown/DropdownItem.js
render() {
let className = classNames('ui-dropdown-item ui-corner-all', {
'ui-state-highlight': this.props.selected,
'ui-dropdown-item-empty': (!this.props.label || this.props.label.length === 0)
});
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
return (
<li className={className} onClick={this.onClick}>
{content}
</li>
);
}
As you can see, {content} is being rendered for each dropdown item, which only contains the "label".
{content}
let content = this.props.template ? this.props.template(this.props.option) : this.props.label;
Therefore if you want to show the "name", you have to put it in label.
Their demo also uses the "label" and "value" attribute only.
https://www.primefaces.org/primereact/#/dropdown
EDIT credits to @Chris G
You can also render a custom content, but then you have to pass a template function to the dropdown.
Their demo shows this.
carTemplate(option) {
if(!option.value) {
return option.label;
}
else {
var logoPath = 'showcase/resources/demo/images/car/' + option.label + '.png';
return (
{option.label}
);
}
}
Which then they passed it to the Dropdown component.
<Dropdown value={this.state.car} options={cars} onChange={this.onCarChange} itemTemplate={this.carTemplate} style={{width:'150px'}} placeholder="Select a Car"/>
The second demo uses the format
{name: 'New York', code: 'NY'} and that works perfectly fine if name is stated as optionLabel as required.– Chris G
Jul 3 at 9:36
{name: 'New York', code: 'NY'}
name
optionLabel
oh right, good catch. Looks like the library requires some Template in order to render a custom content.
– christopher_pk
Jul 3 at 9:41
Thank you very much for your help. I know this demonstration primefaces.org/primereact/#/dropdown and I could not get it to work. I only needed add optionLabel="name" in the <Dropdown>
– Belen Dominguez Garcia
Jul 3 at 10:09
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Add
optionLabel="name"to your<Dropdown>.– Chris G
Jul 3 at 9:34