Material ui dropdown and other controls doesnt work propertly - reactjs

Question

I have an issue with the material-ui lib, where the dropdowns and menu doesnt work.
My code is the following.
import React from 'react';
import {Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} from 'material-ui/Toolbar';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
import injectTapEventPlugin from 'react-tap-event-plugin';
class Interruptions extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 1
};
injectTapEventPlugin();
}
handleChange(event, index, value) {
this.setState({value: value});
}
render(){
return (
<div className="interruptions__wrapper">
<Toolbar>
<ToolbarGroup firstChild={true}>
<DropDownMenu value={this.state.value} openImmediately={true} onChange={this.handleChange}>
<MenuItem value={1} primaryText="All Broadcasts" />
<MenuItem value={2} primaryText="All Voice" />
<MenuItem value={3} primaryText="All Text" />
<MenuItem value={4} primaryText="Complete Voice" />
<MenuItem value={5} primaryText="Complete Text" />
<MenuItem value={6} primaryText="Active Voice" />
<MenuItem value={7} primaryText="Active Text" />
</DropDownMenu>
</ToolbarGroup>
<ToolbarGroup>
<ToolbarTitle text="Options" />
</ToolbarGroup>
</Toolbar>
</div>
);
}
}
export default Interruptions;
And this is my main where i render the app in the html.
import React from 'react';
import ReactDOM from 'react-dom';
import Interruptions from '../components/Interruptions.jsx';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import {red500} from 'material-ui/styles/colors';
import darkBaseTheme from 'material-ui/styles/baseThemes/darkBaseTheme';
const muiTheme = getMuiTheme({
palette: {
textColor: red500,
}
});
const InterruptionsApp = () => (
<MuiThemeProvider muiTheme={getMuiTheme(darkBaseTheme)}>
<Interruptions />
</MuiThemeProvider>
)
ReactDOM.render(<InterruptionsApp />, document.getElementById('myInterruptions'));
Im using openImmediately={true} to see if atleast the menu is showing up (and it does) but when i try to click on it to open it again it doesnt show.
Thanks in advice.

Answer 1

#Jeff McCloud is right. You should injectTapEventPlugin() before you are first use the render function from React-DOM.
I don't know how you build your application webpack or browserify?
I run in this issue too. Be sure that you have declared React, React-DOM, react-tap-event-plugin and all the React addons which you are using to the external libs. I am building a vendor.js for instance.
This approach prevents that you have multiple version of React in your project which could also produce this kind of behavior.