From a1decaf2a5ac48aaebbeca72026a640ec65583d5 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 21 Dec 2015 20:04:52 +0000
Subject: [PATCH] Merge pull request #5695 from gaearon/patch-2

Fix children to be a prop in the blog post example
(cherry picked from commit 50af0341081460968cae4b739758266d032166fc)
---
 ...-12-18-react-components-elements-and-instances.md | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/docs/_posts/2015-12-18-react-components-elements-and-instances.md b/docs/_posts/2015-12-18-react-components-elements-and-instances.md
index a69abdaae4..68800aa17f 100644
--- a/docs/_posts/2015-12-18-react-components-elements-and-instances.md
+++ b/docs/_posts/2015-12-18-react-components-elements-and-instances.md
@@ -9,7 +9,7 @@ The difference between **components, their instances, and elements** confuses ma
 
 If you’re new to React, you probably only worked with component classes and instances before. For example, you may declare a `Button` *component* by creating a class. When the app is running, you may have several *instances* of this component on screen, each with its own properties and local state. This is the traditional object-oriented UI programming. Why introduce *elements*?
 
-In this traditional UI model, it is up to you take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
+In this traditional UI model, it is up to you to take care of creating and destroying child component instances. If a `Form` component wants to render a `Button` component, it needs to create its instance, and manually keep it up to date with any new information.
 
 ```js
 class Form extends TraditionalObjectOrientedView {
@@ -70,7 +70,9 @@ When an element’s `type` is a string, it represents a DOM node with that tag n
     className: 'button button-blue',
     children: {
       type: 'b',
-      children: 'OK!'
+      props: {
+        children: 'OK!'
+      }
     }
   }
 }
@@ -160,7 +162,7 @@ const DeleteAccount = () => (
 );
 ```
 
-This mix and matching helps keep components decoupled from each other, as they can express both *is-a* () and *has-a* relationships exclusively through composition:
+This mix and matching helps keep components decoupled from each other, as they can express both *is-a* and *has-a* relationships exclusively through composition:
 
 * `Button` is a DOM `<button>` with specific properties.
 * `DangerButton` is a `Button` with specific properties.
@@ -191,7 +193,9 @@ React will ask `Button` what it renders to. The `Button` will return this elemen
     className: 'button button-blue',
     children: {
       type: 'b',
-      children: 'OK!'
+      props: {
+        children: 'OK!'
+      }
     }
   }
 }