Hi guys,
I am trying to set the selected value for a semantic-ui dropdown. But whatever I am doing, it does not work. Does anybody have experience in this issue? Thank you
class WebsitesDropdown extends Component {
componentDidMount() {
$('#websites-dropdown').dropdown({
onChange: function(value, text, $selectItem) {
FlowRouter.redirect('/website/'+$selectItem.data('value')+'/settings');
}
});
}
componentDidUpdate() {
let currentWebsiteSlug = FlowRouter.getParam("website_id");
//this does not work, the currentWebsiteSlug is a correct value
$('#websites-dropdown').dropdown('set selected', currentWebsiteSlug);
}
render() {
let websiteSlug = FlowRouter.getParam("website_id");
return(
<div className="ui dropdown item" id="websites-dropdown">
<i className="folder open outline icon left"></i>
<div className="default text">Select Website</div>
<i className="dropdown icon"></i>
<div className="menu">
{this.props.websites.map((website, i) => {
//this class does not work either to set selected
let selected = websiteSlug === website.slug ? 'active selected' : '';
return (
<div className={"item "+selected} data-id={website._id} data-value={website.slug} key={website._id}>{website.name}</div>
)
})}
</div>
</div>
)
}
}
export default createContainer(() => {
Meteor.subscribe('userWebsites');
return {
websites: Websites.find({}).fetch()
}
}, WebsitesDropdown);