var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", icon: "icon-account" }, { name: "Messages", icon: "icon-message" }, { name: "Settings", icon: "icon-settings" } /*{ name:"Help & Support <span class='font-awesome icon-support'></span>(888) 664.6261", listClass:"no-mobile last help-support last" }*/ ]; return ( <div className="acc-header-wrapper clearfix"> <ul className="acc-btns-container"> {accountMenuData.map(function(data, index) { var activeClass = ""; if (self.state.focused == index) { activeClass = "active"; } return ( <li key={index} className={activeClass} onClick={self.clicked.bind(self, index)} > <a href="#" className={data.icon}> {data.name} </a> </li> ); })} </ul> </div> ); } }); ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container"));
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter