grantsheppard

////////////////////////////////////////////////////////////////////////////////
// Exercise:
//
// - change the contents of the render function and save the file
// - see the updates automatically in your browser without refreshing!
////////////////////////////////////////////////////////////////////////////////
import React from 'react'
import ReactDOM from 'react-dom'

function App() {

grantsheppard

const DATA = [
 { id: 1, name: 'USA', description: 'Land of the Free, Home of the brave' },
 { id: 2, name: 'Brazil', description: 'Sunshine, beaches, and Carnival' },
 { id: 3, name: 'Russia', description: 'World Cup 2018!' }
].reverse()

grantsheppard

class Tabs extends React.Component {
  static propTypes = {
    data: React.PropTypes.array.isRequired
  }

  state = {
    activeTabIndex: 0
  }

  handleTabClick(activeTabIndex) {

grantsheppard

const imperativeDouble = numbers => {
  const doubled = []
  for (i = 0; i < numbers.length; i++) {
    doubled.push(numbers[i] * 2)
  }
  return doubled;
}

const declarativeDouble = numbers => numbers.map(n => n * 2)

grantsheppard

<button onClick={this.openModal}>open modal</button>

<Modal>
  <button onClick={this.closeModal}>Close</button>
</Modal>

grantsheppard

<button onClick={this.openModal}>open modal</button>

<Modal isOpen={this.state.isModalOpen} onClose={this.closeModal}>
  <button onClick={this.closeModal}>Close</button>
</Modal>

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData}/>
  }
}

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData} tabsPlacement="bottom" />
  }
}

grantsheppard

class App extends React.Component {
  render() {
    const tabData = [
      { label: 'Tacos', description: <p>Tacos are delicious</p> },
      { label: 'Burritos', description: <p>But burritos are better</p> }
    ]

    return <Tabs data={tabData} tabsPlacement="bottom" disabled={[ 1 ]} />
  }
}

grantsheppard

class App extends React.Component {
  render() {
    return (
      <div>
        <Tabs>
          <TabPanels>
            <TabPanel>
              <p>Tacos are delicious</p>
            </TabPanel>
            <TabPanel>