ProfileSummary

import React, { Component } from 'react';
import classnames from 'classnames';

export default class ProfileSummary extends Component {

  constructor(props) {
    super(props);
    this.state = {
      editable: false,
    };
  }

  setEdit() {
    this.setState({ editable: !this.state.editable });
  }

  render() {
    let classes = classnames('profile-summary', { editable: this.state.editable });
    let editBtnText = (this.state.editable) ? 'done' : 'edit';

    return (
      <div className={classes}>
        <button
          className="btn"
          onClick={() => this.setEdit()}
        >{editBtnText}</button>
        <img
          src="http://placehold.it/140x140" alt="Profile" className="avatar"
        />
        <input
          id="fullName" className="profile-input" disabled={!this.state.editable}
          name="fullName" type="text" defaultValue="Todd Jason"
        />
        <input
          id="location" className="profile-input" disabled={!this.state.editable}
          name="location" type="text" defaultValue="San Francisco, CA"
        />
      </div>
    );
  }
}