Update Prettier line-widths for example code

.prettierrc.examples

@@ -2,7 +2,7 @@
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "parser": "flow",
-  "printWidth": 40,
+  "printWidth": 60,
   "singleQuote": true,
   "trailingComma": "es5"
 }

examples/components-and-props/composing-components.js

@@ -12,7 +12,4 @@ function App() {
   );
 }
 
-ReactDOM.render(
+ReactDOM.render(<App />, document.getElementById('root'));
-  <App />,
-  document.getElementById('root')
-);

examples/components-and-props/extracting-components-continued.js

@@ -16,9 +16,7 @@ function UserInfo(props) {
   return (
     <div className="UserInfo">
       <Avatar user={props.user} />
-      <div className="UserInfo-name">
+      <div className="UserInfo-name">{props.user.name}</div>
-        {props.user.name}
-      </div>
     </div>
   );
 }
@@ -27,9 +25,7 @@ function Comment(props) {
   return (
     <div className="Comment">
       <UserInfo user={props.author} />
-      <div className="Comment-text">
+      <div className="Comment-text">{props.text}</div>
-        {props.text}
-      </div>
       <div className="Comment-date">
         {formatDate(props.date)}
       </div>
@@ -39,12 +35,10 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text:
+  text: 'I hope you enjoy learning React!',
-    'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl:
+    avatarUrl: 'http://placekitten.com/g/64/64',
-      'http://placekitten.com/g/64/64',
   },
 };
 ReactDOM.render(

examples/components-and-props/extracting-components.js

@@ -15,9 +15,7 @@ function Comment(props) {
           {props.author.name}
         </div>
       </div>
-      <div className="Comment-text">
+      <div className="Comment-text">{props.text}</div>
-        {props.text}
-      </div>
       <div className="Comment-date">
         {formatDate(props.date)}
       </div>
@@ -27,12 +25,10 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text:
+  text: 'I hope you enjoy learning React!',
-    'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl:
+    avatarUrl: 'http://placekitten.com/g/64/64',
-      'http://placekitten.com/g/64/64',
   },
 };
 ReactDOM.render(

examples/components-and-props/rendering-a-component.js

@@ -3,7 +3,4 @@ function Welcome(props) {
 }
 
 const element = <Welcome name="Sara" />;
-ReactDOM.render(
+ReactDOM.render(element, document.getElementById('root'));
-  element,
-  document.getElementById('root')
-);

examples/es5-syntax-example.js

@@ -1,5 +1,3 @@
 const element = <h1>Hello, world!</h1>;
-const container = document.getElementById(
+const container = document.getElementById('root');
-  'root'
-);
 ReactDOM.render(element, container);

examples/introducing-jsx.js

@@ -1,7 +1,5 @@
 function formatName(user) {
-  return (
+  return user.firstName + ' ' + user.lastName;
-    user.firstName + ' ' + user.lastName
-  );
 }
 
 const user = {
@@ -9,11 +7,6 @@ const user = {
   lastName: 'Perez',
 };
 
-const element = (
+const element = <h1>Hello, {formatName(user)}!</h1>;
-  <h1>Hello, {formatName(user)}!</h1>
-);
 
-ReactDOM.render(
+ReactDOM.render(element, document.getElementById('root'));
-  element,
-  document.getElementById('root')
-);

examples/reconciliation/index-used-as-key.js

@@ -7,9 +7,7 @@ const ToDo = props => (
       <input />
     </td>
     <td>
-      <label>
+      <label>{props.createdAt.toTimeString()}</label>
-        {props.createdAt.toTimeString()}
-      </label>
     </td>
   </tr>
 );
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort(
+    const sortedList = this.state.list.sort((a, b) => {
-      (a, b) => {
+      return a.createdAt - b.createdAt;
-        return (
+    });
-          a.createdAt - b.createdAt
-        );
-      }
-    );
     this.setState({
       list: [...sortedList],
     });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort(
+    const sortedList = this.state.list.sort((a, b) => {
-      (a, b) => {
+      return b.createdAt - a.createdAt;
-        return (
+    });
-          b.createdAt - a.createdAt
-        );
-      }
-    );
     this.setState({
       list: [...sortedList],
     });
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
 
   addToEnd() {
     const date = new Date();
-    const nextId =
+    const nextId = this.state.todoCounter + 1;
-      this.state.todoCounter + 1;
     const newList = [
       ...this.state.list,
       {id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
 
   addToStart() {
     const date = new Date();
-    const nextId =
+    const nextId = this.state.todoCounter + 1;
-      this.state.todoCounter + 1;
     const newList = [
       {id: nextId, createdAt: date},
       ...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
       <div>
         <code>key=index</code>
         <br />
-        <button
+        <button onClick={this.addToStart.bind(this)}>
-          onClick={this.addToStart.bind(
-            this
-          )}>
           Add New to Start
         </button>
-        <button
+        <button onClick={this.addToEnd.bind(this)}>
-          onClick={this.addToEnd.bind(
-            this
-          )}>
           Add New to End
         </button>
-        <button
+        <button onClick={this.sortByEarliest.bind(this)}>
-          onClick={this.sortByEarliest.bind(
-            this
-          )}>
           Sort by Earliest
         </button>
-        <button
+        <button onClick={this.sortByLatest.bind(this)}>
-          onClick={this.sortByLatest.bind(
-            this
-          )}>
           Sort by Latest
         </button>
         <table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
             <th />
             <th>created at</th>
           </tr>
-          {this.state.list.map(
+          {this.state.list.map((todo, index) => (
-            (todo, index) => (
+            <ToDo key={index} {...todo} />
-              <ToDo
+          ))}
-                key={index}
-                {...todo}
-              />
-            )
-          )}
         </table>
       </div>
     );

examples/reconciliation/no-index-used-as-key.js

@@ -7,9 +7,7 @@ const ToDo = props => (
       <input />
     </td>
     <td>
-      <label>
+      <label>{props.createdAt.toTimeString()}</label>
-        {props.createdAt.toTimeString()}
-      </label>
     </td>
   </tr>
 );
@@ -31,26 +29,18 @@ class ToDoList extends React.Component {
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort(
+    const sortedList = this.state.list.sort((a, b) => {
-      (a, b) => {
+      return a.createdAt - b.createdAt;
-        return (
+    });
-          a.createdAt - b.createdAt
-        );
-      }
-    );
     this.setState({
       list: [...sortedList],
     });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort(
+    const sortedList = this.state.list.sort((a, b) => {
-      (a, b) => {
+      return b.createdAt - a.createdAt;
-        return (
+    });
-          b.createdAt - a.createdAt
-        );
-      }
-    );
     this.setState({
       list: [...sortedList],
     });
@@ -58,8 +48,7 @@ class ToDoList extends React.Component {
 
   addToEnd() {
     const date = new Date();
-    const nextId =
+    const nextId = this.state.toDoCounter + 1;
-      this.state.toDoCounter + 1;
     const newList = [
       ...this.state.list,
       {id: nextId, createdAt: date},
@@ -72,8 +61,7 @@ class ToDoList extends React.Component {
 
   addToStart() {
     const date = new Date();
-    const nextId =
+    const nextId = this.state.toDoCounter + 1;
-      this.state.toDoCounter + 1;
     const newList = [
       {id: nextId, createdAt: date},
       ...this.state.list,
@@ -89,28 +77,16 @@ class ToDoList extends React.Component {
       <div>
         <code>key=id</code>
         <br />
-        <button
+        <button onClick={this.addToStart.bind(this)}>
-          onClick={this.addToStart.bind(
-            this
-          )}>
           Add New to Start
         </button>
-        <button
+        <button onClick={this.addToEnd.bind(this)}>
-          onClick={this.addToEnd.bind(
-            this
-          )}>
           Add New to End
         </button>
-        <button
+        <button onClick={this.sortByEarliest.bind(this)}>
-          onClick={this.sortByEarliest.bind(
-            this
-          )}>
           Sort by Earliest
         </button>
-        <button
+        <button onClick={this.sortByLatest.bind(this)}>
-          onClick={this.sortByLatest.bind(
-            this
-          )}>
           Sort by Latest
         </button>
         <table>
@@ -119,14 +95,9 @@ class ToDoList extends React.Component {
             <th />
             <th>created at</th>
           </tr>
-          {this.state.list.map(
+          {this.state.list.map((todo, index) => (
-            (todo, index) => (
+            <ToDo key={todo.id} {...todo} />
-              <ToDo
+          ))}
-                key={todo.id}
-                {...todo}
-              />
-            )
-          )}
         </table>
       </div>
     );

examples/rendering-elements/render-an-element.js

@@ -1,5 +1,2 @@
 const element = <h1>Hello, world</h1>;
-ReactDOM.render(
+ReactDOM.render(element, document.getElementById('root'));
-  element,
-  document.getElementById('root')
-);

examples/rendering-elements/update-rendered-element.js

@@ -2,17 +2,11 @@ function tick() {
   const element = (
     <div>
       <h1>Hello, world!</h1>
-      <h2>
+      <h2>It is {new Date().toLocaleTimeString()}.</h2>
-        It is{' '}
-        {new Date().toLocaleTimeString()}.
-      </h2>
     </div>
   );
-  // highlight-range{1-4}
+  // highlight-next-line
-  ReactDOM.render(
+  ReactDOM.render(element, document.getElementById('root'));
-    element,
-    document.getElementById('root')
-  );
 }
 
 setInterval(tick, 1000);

examples/tutorial-expanded-version.js

@@ -1,7 +1,5 @@
 <div className="shopping-list">
-  <h1>
+  <h1>Shopping List for {props.name}</h1>
-    Shopping List for {props.name}
-  </h1>
   <ul>
     <li>Instagram</li>
     <li>WhatsApp</li>

examples/uncontrolled-components/input-type-file.js

@@ -1,24 +1,19 @@
 class FileInput extends React.Component {
   constructor(props) {
     super(props);
-    this.handleSubmit = this.handleSubmit.bind(
+    this.handleSubmit = this.handleSubmit.bind(this);
-      this
-    );
   }
-  // highlight-range{5}
+  // highlight-range{4}
   handleSubmit(event) {
     event.preventDefault();
     alert(
-      `Selected file - ${
+      `Selected file - ${this.fileInput.files[0].name}`
-        this.fileInput.files[0].name
-      }`
     );
   }
 
   render() {
     return (
-      <form
+      <form onSubmit={this.handleSubmit}>
-        onSubmit={this.handleSubmit}>
         <label>
           Upload file:
           {/* highlight-range{1-6} */}
@@ -30,9 +25,7 @@ class FileInput extends React.Component {
           />
         </label>
         <br />
-        <button type="submit">
+        <button type="submit">Submit</button>
-          Submit
-        </button>
       </form>
     );
   }