From 981483ce0483482e98345f9196c761c862dc74f8 Mon Sep 17 00:00:00 2001
From: Kenneth Ormandy <kenneth@chloi.io>
Date: Fri, 11 Mar 2016 09:18:18 -0800
Subject: [PATCH] Updates Quick Start examples to run as expected
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Summary:Hey! Thanks so much for the hard work on this project. I’m just making my way through the documentation now, and I couldn’t get the Quick Start examples to run until I made the following changes.

I have very little React experience, and even less with ES2015 stuff—it’s entirely possible I just misunderstood something in all these cases. Regardless, the examples didn’t work as-is for me, and to the best of my understand, these changes fix that.

The one change I made that was maybe more of an opinion was turning:

```js
const {editorState} = this.state;
return <Editor editorState={editorState} onChange={this.onChange} />
```

…into:

```js
return <Editor editorState={this.state.editorState} onChange={this.onChange} />
```

…which just reduced the complexity for me at the beginning, and had more in common with the initial Input example.
Closes https://github.com/facebook/draft-js/pull/180

Reviewed By: spicyj

Differential Revision: D3034470

fb-gh-sync-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c
shipit-source-id: c99ba4e24dd42a2c5a0634dfcc6c8faab8cd5b7c
---
 docs/QuickStart-API-Basics.md   |  8 +++++---
 docs/QuickStart-Rich-Styling.md | 18 ++++++++----------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/docs/QuickStart-API-Basics.md b/docs/QuickStart-API-Basics.md
index 2055d79..d604c0e 100644
--- a/docs/QuickStart-API-Basics.md
+++ b/docs/QuickStart-API-Basics.md
@@ -30,6 +30,7 @@ to provide information about the text that the user has written.
 class MyInput extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {value: ''};
     this.onChange = (evt) => this.setState({value: evt.target.value});
   }
   render() {
@@ -60,15 +61,16 @@ selection within the editor will create new `EditorState` objects. Note that
 this remains efficient due to data persistence across immutable objects.
 
 ```js
-import {Editor} from 'draft-js';
+import {Editor, EditorState} from 'draft-js';
+
 class MyEditor extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {editorState: EditorState.createEmpty()};
     this.onChange = (editorState) => this.setState({editorState});
   }
   render() {
-    const {editorState} = this.state;
-    return <Editor editorState={editorState} onChange={this.onChange} />;
+    return <Editor editorState={this.state.editorState} onChange={this.onChange} />;
   }
 }
 ```
diff --git a/docs/QuickStart-Rich-Styling.md b/docs/QuickStart-Rich-Styling.md
index 889852b..22b9884 100644
--- a/docs/QuickStart-Rich-Styling.md
+++ b/docs/QuickStart-Rich-Styling.md
@@ -44,15 +44,16 @@ We can observe and handle key commands via the `handleKeyCommand` prop, and
 hook these into `RichUtils` to apply or remove the desired style.
 
 ```js
-import {Editor, RichUtils} from 'draft-js';
+import {Editor, EditorState, RichUtils} from 'draft-js';
+
 class MyEditor extends React.Component {
   constructor(props) {
     super(props);
+    this.state = {editorState: EditorState.createEmpty()};
     this.onChange = (editorState) => this.setState({editorState});
   }
   handleKeyCommand(command) {
-    const {editorState} = this.state;
-    const newState = RichUtils.handleKeyCommand(editorState, command);
+    const newState = RichUtils.handleKeyCommand(this.state.editorState, command);
     if (newState) {
       this.onChange(newState);
       return true;
@@ -60,10 +61,9 @@ class MyEditor extends React.Component {
     return false;
   }
   render() {
-    const {editorState} = this.state;
     return (
       <Editor
-        editorState={editorState}
+        editorState={this.state.editorState}
         handleKeyCommand={this.handleKeyCommand}
         onChange={this.onChange}
       />
@@ -90,20 +90,18 @@ Here's a super-basic example with a "Bold" button to toggle the `BOLD` style.
 
 ```js
 class MyEditor extends React.Component {
-  ...
+  // …
 
   _onBoldClick() {
-    const {editorState} = this.state;
-    this.onChange(RichUtils.toggleInlineStyle(editorState, 'BOLD'));
+    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, 'BOLD'));
   }
 
   render() {
-    const {editorState} = this.state;
     return (
       <div>
         <button onClick={this._onBoldClick.bind(this)}>Bold</button>
         <Editor
-          editorState={editorState}
+          editorState={this.state.editorState}
           handleKeyCommand={this.handleKeyCommand}
           onChange={this.onChange}
         />
