index.js

import React from 'react'
import AccountDetail from 'components/AccountDetail'
import CustomerForm from 'components/CustomerForm'
import CustomerPanel from 'components/CustomerPanel'
import SecurityPanel from 'components/SecurityPanel'

class Account extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isEditing: true
    }
    this.edit = this.edit.bind(this)
    this.handleEdit = this.handleEdit.bind(this)
  }
  edit(e) {
    this.setState({ isEditing: true })
  }
  handleEdit(e) {
    debugger // never hit
  }
  render() {
    const { guest } = this.props
    const { account, centre } = guest
    const isEditing = this.state.isEditing
    const form = {
      initialValues: account,
      handleSubmit: this.handleEdit
    }
    return (
      <div className="guest-detail">
        <h2>Account</h2>
        <div className="col">
          { (isEditing) ? <CustomerForm {...form} /> : (
            <CustomerPanel {...account} onEditClick={this.edit} />
          ) }
          <SecurityPanel {...account} />
        </div>
        <div className="col">
          <AccountDetail {...account} centre={centre} />
        </div>
      </div>
    )
  }
}

export default Account