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.",
"
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",
"",