From eaca7dbcd77607406fab46c4157a4849aab246e0 Mon Sep 17 00:00:00 2001
From: Sigurd Morsby <Morsby@users.noreply.github.com>
Date: Mon, 12 Nov 2018 03:20:05 +0100
Subject: [PATCH] Added info about destructuring the Blog component (#22981)

Added info about destructuring by using the Blog component as an example.

Also fixed a simple typo.
---
 .../index.md                                  | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/guide/english/react/handling-data-with-props-in-react/index.md b/guide/english/react/handling-data-with-props-in-react/index.md
index de8267a660..c1cbebb1d4 100644
--- a/guide/english/react/handling-data-with-props-in-react/index.md
+++ b/guide/english/react/handling-data-with-props-in-react/index.md
@@ -66,7 +66,7 @@ const Blog = props => {
 
 Noticed how we used the props object to render the title and body values that will be passed to the Blog component. Props is read-only or immutable, so we don’t have to worry about changing the props values.
 
-Before we write our App component, we need to protect our component be defining the variable type that will passed down to each prop. We will define this using React.PropTypes. Add the following to your JavaScript file.
+Before we write our App component, we need to protect our component by defining the variable type that will passed down to each prop. We will define this using React.PropTypes. Add the following to your JavaScript file.
 
 ```javascript
 Blog.propTypes = {
@@ -102,3 +102,23 @@ Now you should be seeing our blog components rendered with the dummy data passed
 
 You can see a CodePen example [here](https://codepen.io/trey-davis/pen/MvdZGX).
 
+### Destructuring props
+
+Often, when you open a Component `.js` file, it's nice to know exactly what props this component takes. You can do this by using the `propTypes` above -- or you can destructure your props already when defining your stateless component. 
+
+Using the Blog component from above, it would look like this:
+
+```javascript
+const Blog = ({title, body)} => {
+  return (
+    <div>
+      <h2>{title}</h2>
+      <p>{body}</p>
+    </div>
+  );
+};
+```
+
+Notie how we saved a few characters by omitting `props.xx` - and we can quickly see that the component requires a title and a body. Neat!
+
+Be aware that this uses ES6 syntax.