Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Youtube in React: make side bar item dynamic
/* ... */
import {Link, withRouter} from 'react-router-dom';
export class SideBarItem extends React.Component {
render() {
// React will ignore custom boolean attributes, therefore we pass a string
// we use this attribute in our SCSS for styling
const highlight = this.shouldBeHighlighted() ? 'highlight-item' : null;
return (
<Link to={{pathname: this.props.path}}>
<Menu.Item className={['sidebar-item', highlight].join(' ')}>
<div className='sidebar-item-alignment-container'>
<span><Icon size='large' name={this.props.icon}/> </span>
shouldBeHighlighted() {
const {pathname} = this.props.location;
console.log('pathname = ', pathname);
if (this.props.path === '/') {
return pathname === this.props.path;
return pathname.includes(this.props.path);
export default withRouter(SideBarItem);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment