import React from 'react'
import ReactDOM from 'react-dom'

let DemoFunc = props => {
  function s (props) {
    if (props.mood === ':|') {
      console.log('y')
      return 'Im |'
    }
    if (props.mood === ':)') {
      return 'Im )'
    }
    if (props.mood === ':|') {
      return 'Im (|)'
    }
  }

  return (
    <div>
      <div> Hello    {s(props.mood).bind}</div>
      <div> Hello {props.mood}</div>
    </div>
  )
}

class Mood extends React.Component {
  constructor (props) {
    super(props)
    this.state = { mood: ':|' }
  }
  render () {
    return (
      <div>
        <span
          style={{
            fontSize: '60',
            border: '1px solid #333',
            cursor: 'pointer'
          }}
          onClick={this.changeMood.bind(this)}
        >
          {this.state.mood}

        </span>
        <DemoFunc mood={this.state.mood} />
        <div>To</div>
      </div>
    )
  }
  changeMood (elem) {
    const moods = [':)', ':|', ':(']
    const current = moods.indexOf(elem.target.textContent)
    this.setState({ mood: current === 2 ? moods[0] : moods[current + 1] })
  }
}

ReactDOM.render(<Mood />, root)