Вот как вы можете использовать react-select
.
npm i react-select
Пример приложения.
export default class App extends React.Component {
state = {
selectedOption: null
};
handleChange = selectedOption => {
this.setState({ selectedOption });
console.log(`Option selected:`, selectedOption);
};
render() {
const { selectedOption } = this.state;
return (
<div>
<Select
onChange={this.handleChange}
defaultValue={[selectedOption]}
isMulti
name="colors"
options={options}
className="basic-multi-select"
classNamePrefix="select"
/>
</div>
);
}
}
json data
const data = [
{
userSkills: [
{
_id: "1",
skillName: "React"
},
{
_id: "2",
skillName: "Php"
},
{
_id: "3",
skillName: "ExpressJS"
},
{
_id: "4",
skillName: "Nodejs"
},
{
_id: "5",
skillName: "Java"
}
]
}
];
let options = data[0].userSkills.map(skill =>
skill
? {
value: skill.skillName,
label: skill.skillName.toUpperCase()
}
: skill
);
Рабочий пример - Демонстрационная версия