diff --git a/seed/challenges/03-front-end-libraries/react.json b/seed/challenges/03-front-end-libraries/react.json index 2148e142fed..416057167f6 100644 --- a/seed/challenges/03-front-end-libraries/react.json +++ b/seed/challenges/03-front-end-libraries/react.json @@ -1485,7 +1485,7 @@ "You can design a more complex stateful component by combining the concepts covered so far. These include initializing state, writing methods that set state, and assigning click handlers to trigger these methods.", "
", "The Counter component keeps track of a count value in state. There are two buttons which call methods increment() and decrement(). Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a reset() method so when the reset button is clicked, the count is set to 0.", - "Note: Make sure you don't modify the classNames of the buttons." + "Note: Make sure you don't modify the classNames of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor." ], "files": { "indexjsx": { @@ -1499,6 +1499,9 @@ " this.state = {", " count: 0", " };", + " // change code below this line", + "", + " // change code above this line", " }", " // change code below this line", "", @@ -1543,7 +1546,8 @@ "The code editor has the skeleton of a component called ControlledInput to create a controlled input element. The component's state is already initialized with an input property that holds an empty string. This value represents the text a user types into the input field.", "First, create a method called handleChange() that has a parameter called event. When the method is called, it receives an event object that contains a string of text from the input element. You can access this string with event.target.value inside the method. Update the input property of the component's state with this new string.", "In the render method, create the input element above the h4 tag. Add a value attribute which is equal to the input property of the component's state. Then add an onChange() event handler set to the handleChange() method.", - "When you type in the input box, that text is processed by the handleChange() method, set as the input property in the local state, and rendered as the value in the input box on the page. The component state is the single source of truth regarding the input data." + "When you type in the input box, that text is processed by the handleChange() method, set as the input property in the local state, and rendered as the value in the input box on the page. The component state is the single source of truth regarding the input data.", + "Last but not least, don't forget to add the necessary bindings in the constructor." ], "files": { "indexjsx": { @@ -1557,6 +1561,9 @@ " this.state = {", " input: ''", " };", + " // change code below this line", + "", + " // change code above this line", " }", " // change code below this line", "",