TextEditOnClick - ReactJs component

import React from 'react';
import {green500} from 'material-ui/styles/colors';
import FlatButton from 'material-ui/FlatButton';
import ContentSave from 'material-ui/svg-icons/content/save';
import TextField from 'material-ui/TextField';

class TextEditOnClick extends React.Component {
  constructor() {
    super();
    this.state = {show_input: false, valid: true};
    this.renderText = this.renderText.bind(this);
  }

  render() {
    return (this.state.show_input) ? this.renderInput() : this.renderText();
  }

  renderInput() {
    return (
      <div style={{display: 'flex'}}>
        <TextField
          ref={input => {
            if (input !== null) {
              input.focus();
              this.input = input;
            }
          }}
          style={this.props.text_field_style}
          defaultValue={this.props.value}
          name={'input'}
        />
        <FlatButton
          label="Save"
          style={{marginTop: 6, marginLeft: 5, color: green500}}
          icon={<ContentSave/>}
          onTouchTap={() => {
            this.setState({show_input: false});
            this.props.handleSave(this.input.getValue());
          }}
        />
      </div>
    );
  }

  renderText() {
    return (
      <div
        onTouchTap={() => this.setState({show_input: true})}
        style={Object.assign({}, {lineHeight: '48px', cursor: 'pointer'}, this.props.style)}
      >
        {this.props.value || '-'}
      </div>
    );
  }
}

TextEditOnClick.PropTypes = {
  value: React.PropTypes.string,
  style: React.PropTypes.obj,
  text_field_style: React.PropTypes.obj,
  handleSave: React.PropTypes.func,
};

TextEditOnClick.defaultProps = {style: {}};

export default TextEditOnClick;

https://reactjs.co This is the official free online convention and tutorial book for React.JS Developers. React is not only the View (in MVC) anymore. ReactJS For Dummies: Why & How to Learn React Redux, the Right Way.