Skip to content

Instantly share code, notes, and snippets.

@kdipaolo
Created September 18, 2017 17:13
Show Gist options
  • Save kdipaolo/48a99972a4ad5d82596defb86613e580 to your computer and use it in GitHub Desktop.
Save kdipaolo/48a99972a4ad5d82596defb86613e580 to your computer and use it in GitHub Desktop.
// example url: http://localhost:3000/project/26/details
const StyledLink = styled(Link)`
border: 2px solid green;
${props =>
props.active &&
css`
border: 2px solid red;
`}
`
class ProjectDetail extends React.Component {
state = {
activeTab: 'documents' // Set to show documents tab by default
}
handleLinkClick = e => {
this.setState({
activeTab: e.target.innerHTML.toLowerCase()
})
}
render() {
<div>
<StyledLink
to={`/project/1/details`}
active={activeTab === 'details'}
onClick={this.handleLinkClick}>
Details
</StyledLink>
<StyledLink
to={`/project/2/documents`}
active={activeTab === 'documents'}
onClick={this.handleLinkClick}>
Documents
</StyledLink>
<StyledLink
to={`/project/3/discussion`}
active={activeTab === 'discussion'}
onClick={this.handleLinkClick}>
Discussion
</StyledLink>
</div>
}
@kdipaolo
Copy link
Author

Gotcha! Makes sense. Thanks for your help!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment