From 039d6d8ccae6e6f477eb1ffd282b2e79518029b4 Mon Sep 17 00:00:00 2001
From: archana <archanid@users.noreply.github.com>
Date: Fri, 8 Sep 2017 09:53:23 -0500
Subject: [PATCH] Update react style guide for jsx/object-curly-spacing never
 (#13889)

---
 style_guides/react_style_guide.md | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/style_guides/react_style_guide.md b/style_guides/react_style_guide.md
index 149bee8a747a..8d9477a3c209 100644
--- a/style_guides/react_style_guide.md
+++ b/style_guides/react_style_guide.md
@@ -5,14 +5,14 @@ Stateless function components are more concise, and there are plans for react to
 Good:
 ```
 export function KuiButton(props) {
-  return <button className="kuiButton" { ...props } />
+  return <button className="kuiButton" {...props} />
 };
 ```
 Bad:
 ```
 export class KuiButton extends React.Component {
   render() {
-    return <button className="kuiButton" { ...this.props } />
+    return <button className="kuiButton" {...this.props} />
   }
 }
 ```
@@ -30,7 +30,7 @@ export class ClickCounter extends React.Component {
   }
 
   render() {
-    return <button className="kuiButton" onClick={ this.onClick } />
+    return <button className="kuiButton" onClick={this.onClick} />
   }
 }
 ```
@@ -48,7 +48,7 @@ Bad:
     }));
   },
   render() {
-    return <button className="kuiButton" onClick={ this.onClick } />
+    return <button className="kuiButton" onClick={this.onClick} />
   }
 });
 ```
@@ -92,14 +92,14 @@ Good:
 ```
 button.js:
 export function KuiButton(props) {
-  return <button className="kuiButton" { ...props } />
+  return <button className="kuiButton" {...props} />
 };
 ```
 Bad:
 ```
 button.js:
 export function Button(props) {
-  return <button className="kuiButton" { ...props } />
+  return <button className="kuiButton" {...props} />
 };
 ```
 The filenames leave it off because snake casing already increases file name length.
@@ -108,8 +108,8 @@ The filenames leave it off because snake casing already increases file name leng
 
 Name action functions in the form of a strong verb and passed properties in the form of on<Subject><Change>. E.g:
 ```
-<sort-button onClick={ action.sort }/>
-<pagerButton onPageNext={ action.turnToNextPage } />
+<sort-button onClick={action.sort}/>
+<pagerButton onPageNext={action.turnToNextPage} />
 ```
 
 ### Avoid creating a function and passing that as a property, in render functions.
@@ -124,7 +124,7 @@ export class ClickCounter extends React.Component {
   }
 
   render() {
-    return <button className="kuiButton" onClick={ this.onClick } />
+    return <button className="kuiButton" onClick={this.onClick} />
   }
 }
 ```
@@ -141,7 +141,7 @@ export class ClickCounter extends React.Component {
   }
 
   render() {
-    return <button className="kuiButton" onClick={ this.onClick } />
+    return <button className="kuiButton" onClick={this.onClick} />
   }
 }
 ```
@@ -156,7 +156,7 @@ export class ClickCounter extends React.Component {
   }
 
   render() {
-    return <button className="kuiButton" onClick={ () => this.onClick() } />
+    return <button className="kuiButton" onClick={() => this.onClick()} />
   }
 }
 ```
@@ -193,13 +193,13 @@ this.setState({
 ### Favor spread operators
 ```
 render() {
-  return <button className="kuiButton" { ...this.props } />
+  return <button className="kuiButton" {...this.props} />
 }
 ```
 ```
 export function Button({ className, ...rest }) {
   const classNames = classNames('KuiButton', className);
-  return <button className={ classNames } { ...rest } />
+  return <button className={classNames} {...rest} />
 };
 ```