Skip to content

Instantly share code, notes, and snippets.

@srph
Created September 22, 2015 09:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srph/d4d80d6c27494d5c7751 to your computer and use it in GitHub Desktop.
Save srph/d4d80d6c27494d5c7751 to your computer and use it in GitHub Desktop.
Basic tab pseudocode in ReactJS
import React from 'react';
export default class TabList extends React.Component {
state = {
active: 0
};
render() {
return (
<div>
<a className="tab" href="#" onClick={this.handleChangeTab(0)}>Hot Deals</a>
<a className="tab" href="#" onClick={this.handleChangeTab(1)}>Featured</a>
<a className="tab" href="#" onClick={this.handleChangeTab(2)}>Porn</a>
{this.renderActiveTab()}
</div>
);
}
handleChangeTab(index) {
return () => {
this.setState({ active: index });
};
}
renderActiveTab() {
switch(this.state.active) {
case 0:
return <Component />
case 1:
return <Component />
case 2:
return <Component />
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment