React

by the94air

HTML

<head>
  <link type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700" rel="stylesheet">
</head>
<div id="app"></div>

CSS

body {
  font-family: "Source Sans Pro", sans-serif;
  padding: 50px;
  font-size: 17px;
}
input {
  font-family: inherit;
  font-size: 17px;
}

React

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	editMode: false,
      text: 'Double click me to edit!',
      newText: ''
    }
  }
  
  handleDoubleClick(e) {
  	this.setState({
    	newText: this.state.text,
    	editMode: true
    });
  }
  
  handleClose(e) {
  	if(e.key == 'Enter') {
       this.setState({
         editMode: false,
         text: this.state.newText
       });
    }
    if(e.keyCode === 27) {
       this.setState({
         editMode: false,
       });
    }
  }
  
  handleChange(e) {
  	this.setState({
      newText: e.target.value
    });
  }
  
  render() {
  	let element;
  	if(this.state.editMode) {
    	element = <div>
          <input type="text" value={this.state.newText} onChange={this.handleChange.bind(this)} onKeyPress={this.handleClose.bind(this)} />
    	</div>;
    } else {
    	element = <p onDoubleClick={this.handleDoubleClick.bind(this)}>{this.state.text}</p>;
    }
    return (
      <div>
        {element}
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))