Set selected value for Semantic-UI Dropdown in React


#1

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);