JSFiddle - React, Tailwind, and code Playground

React Tabs Practice

by Glen Cheney

HTML

<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

class TabsApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
	    selectedIndex: 0,
    	tabs: [
      	{
        	id: 'upcoming',
        	title: 'Upcoming Flights',
          content: {
            date: 'October 12',
            number: 'gc170',
          }
        },
        {
        	id: 'saved',
        	title: 'Saved Flights',
          content: {
          	date: 'August 8',
            number: 'SW888',
          }
        },
        {
        	id: 'past',
        	title: 'Past Flights',
          content: {
          	date: 'December 20',
            number: 'AK123',
          }
        }
      ]
    };
    
    this.select = this.select.bind(this);
  }
  
  select(index) {
		this.setState({
			selectedIndex: index,
    });
  }
  
  render() {
    return (
      <div>
        <h2>Tabs:</h2>
        <TabStrip select={this.select} items={this.state.tabs} selectedIndex={this.state.selectedIndex} />
        <TabPanes items={this.state.tabs} selectedIndex={this.state.selectedIndex} />
      </div>
    )
  }
}

class TabStrip extends React.Component {
	render() {
  	return (
    	<ul style={{
      	margin: 0,
        display: 'flex',
      }}>
        {this.props.items.map((item, i) => (
          <li key={item.id} href={`#${item.id}`} style={{
          	backgroundColor: this.props.selectedIndex === i ? 'mediumseagreen' : 'lightgray',
          }}>
            <a href={`#${item.id}`} onClick={(event) => {
            	event.preventDefault();
            	this.props.select(i);
            }}>{item.title}</a>
          </li>
        ))}
      </ul>
    );
  }
}

const hiddenPane = {
	display: 'none',
};

const visiblePane = {
	display: 'block',
}

class TabPanes extends React.Component {
	render() {
  	return (
    	<div>
        {this.props.items.map((item, i) => (
          <div key={item.id} href={`#${item.id}`} style={this.props.selectedIndex === i ? visiblePane : hiddenPane}>
            <p>Date:...