const React = require('react')

class Popular extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedLanguage: 'All'
    }
    this.updateLanguage = this.updateLanguage.bind(this)
  }
  updateLanguage (lang) {
    this.setState(function () {
      return {
        selectedLanguage: lang
      }
    })
  }

  render () {
    const languages = ['All', 'Javascript', 'Python', 'clojure', 'Haskell']
    return (
      <ul className='languages'>
        {languages.map(function (lang) {
          return (
            <li
              style={lang === this.state.selectedLanguage ? {color: 'teal'} : null}
              onClick={this.updateLanguage.bind(null, lang)}
              key={lang}>
              {lang}
            </li>)
        }, this)}
      </ul>
    )
  }
}

module.exports = Popular

const React = require('react')
const propTypes = require('prop-types')

class SelectLanguage extends React.Component {
  render () {
    const languages = ['All', 'Javascript', 'Python', 'clojure', 'Haskell']
    return (
      <ul className='languages'>
        {languages.map(function (lang) {
          return (
            <li
              style={lang === this.props.selectedLanguage ? {color: 'teal'} : null}
              onClick={this.props.onSelect.bind(null, lang)}
              key={lang}>
              {lang}
            </li>)
        }, this)}
      </ul>
    )
  }
}

SelectLanguage.propTypes = {
  selectedLanguage: propTypes.string.isRequired,
  onSelect: propTypes.func.isRequired
}
class Popular extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      selectedLanguage: 'All'
    }
    this.updateLanguage = this.updateLanguage.bind(this)
  }
  updateLanguage (lang) {
    this.setState(function () {
      return {
        selectedLanguage: lang
      }
    })
  }

  render () {
    return (
      <div>
        <SelectLanguage
          selectedLanguage={this.state.selectedLanguage}
          onSelect={this.updateLanguage} />
      </div>
    )
  }
}

module.exports = Popular

Modify Popular to contain modularized components -Add SelectLanguage to render the languages -Add SelectLanguage component to Popular -Add propTypes to validate prop-types being passed -Add propTypes to validate required prop-types are being passed -Add props to SelectLanguage component