diff --git a/docs/handling-events.html b/docs/handling-events.html index 1faa88cbbb..2eeeec41d6 100644 --- a/docs/handling-events.html +++ b/docs/handling-events.html @@ -150,7 +150,7 @@

Try it on CodePen.

-

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.toggle and pass it to onClick, this will be undefined when the function is actually called.

+

You have to be careful about the meaning of this in JSX callbacks. In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.

This is not React-specific behavior; it is a part of how functions work in JavaScript. Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.

diff --git a/docs/thinking-in-react.html b/docs/thinking-in-react.html index 561bc398da..6a0a803426 100644 --- a/docs/thinking-in-react.html +++ b/docs/thinking-in-react.html @@ -203,7 +203,7 @@
  • It conceptually makes sense for the filter text and checked value to live in FilterableProductTable
    • -

    Cool, so we've decided that our state lives in FilterableProductTable. First, add a getInitialState() method to FilterableProductTable that returns {filterText: '', inStockOnly: false} to reflect the initial state of your application. Then, pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

    +

    Cool, so we've decided that our state lives in FilterableProductTable. First, add an instance property this.state = {filterText: '', inStockOnly: false} to FilterableProductTable's constructor to reflect the initial state of your application. Then, pass filterText and inStockOnly to ProductTable and SearchBar as a prop. Finally, use these props to filter the rows in ProductTable and set the values of the form fields in SearchBar.

    You can start seeing how your application will behave: set filterText to "ball" and refresh your app. You'll see that the data table is updated correctly.

    Step 5: Add Inverse Data Flow #

    diff --git a/tutorial/tutorial.html b/tutorial/tutorial.html index 0ef3907a59..5612a63546 100644 --- a/tutorial/tutorial.html +++ b/tutorial/tutorial.html @@ -337,7 +337,7 @@

    Tracking Changes #

    Determining if a mutated object has changed is complex because changes are made directly to the object. This then requires comparing the current object to a previous copy, traversing the entire object tree, and comparing each variable and value. This process can become increasingly complex.

    -

    Determining how a immutable object has changed is considerably easier. If the object being referenced is different from before, then the object has changed. That's it.

    +

    Determining how an immutable object has changed is considerably easier. If the object being referenced is different from before, then the object has changed. That's it.

    Determining When To Re-render in React #

    The biggest benefit of immutability in React comes when you build simple pure components. Since immutable data can more easily determine if changes have been made it also helps to determine when a component requires being re-rendered.

    @@ -356,7 +356,7 @@

    Taking Turns #

    An obvious defect in our game is that only X can play. Let's fix that.

    -

    Let's default the first move to be by 'X'. Modify our starting state in our Game constructor.

    +

    Let's default the first move to be by 'X'. Modify our starting state in our Board constructor.

    class Board extends React.Component {
   constructor() {
     super();
@@ -448,7 +448,7 @@
 <div className="game-board">
   <Board
     squares={current.squares}
-    onClick={() => this.handleClick(i)}
+    onClick={(i) => this.handleClick(i)}
   />
 </div>
 <div className="game-info">
@@ -473,7 +473,7 @@
   });
 }
    -

    At this point, Board only needs renderStep and render; the state initialization and click handler should both live in Game.

    +

    At this point, Board only needs renderSquare and render; the state initialization and click handler should both live in Game.

    Showing the Moves #

    Let's show the previous moves made in the game so far. We learned earlier that React elements are first-class JS objects and we can store them or pass them around. To render multiple items in React, we pass an array of React elements. The most common way to build that array is to map over your array of data. Let's do that in the render method of Game:

    const moves = history.map((step, move) => {
@@ -481,7 +481,7 @@
     'Move #' + move :
     'Game start';
   return (
-    <li key={move}>
+    <li>
       <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
     </li>
   );