diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c6.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c6.md index 90dc1ac9f45..d74643239bc 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c6.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590c6.md @@ -7,9 +7,9 @@ dashedName: step-6 # --description-- -You may notice you can't type in the `input`. If you open up the console you will see a warning. +You may notice you can't type in the `input`. If you open up the console you will see a warning. -To remove the warning, use the `onChange` event to update `heroName`. The value for the `onChange` event should be an arrow function with `e` for the parameter. The arrow function should implicitly return `setHeroName(e.target.value)`. +To remove the warning and fix the input typing issue, use the `onChange` event to update `heroName`. The value for the `onChange` event should be an arrow function with `e` for the parameter. The arrow function should implicitly return `setHeroName(e.target.value)`. # --hints-- @@ -19,7 +19,7 @@ Your `input` element should have an `onChange` attribute. assert.match(code, /onChange\s*=\s*\{/) ``` -You should use the `onChange` to set the value of the `heroName` state variable so you can type in the input field. +You should use `onChange` with an arrow function that implicitly returns to set the value of the `heroName` state variable. ```js assert.match(code, /onChange\s*=\s*\{\s*(e|\(\s*e\s*\))\s*=>\s*setHeroName\s*\(\s*e\s*\.\s*target\s*\.\s*value\s*\)\s*\}/) diff --git a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cc.md b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cc.md index bb678384b05..f5d4dce2d09 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cc.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-superhero-application-form/680900675ae3d54ee19590cc.md @@ -9,7 +9,7 @@ dashedName: step-12 The values of the `powerSourceOptions` now show up as the options for the `select` element. -Now, use `powerSource` as the value of the `select`. Then, add an `onChange` to set that value using the `setPowerSource` setter function and `e.target.value` like you did with the other form elements. +Now, use `powerSource` as the value of the `select` element. Then, set up an `onChange` handler using an arrow function that takes `e` as the parameter and implicitly returns `setPowerSource(e.target.value)`. # --hints-- @@ -19,7 +19,7 @@ You should use `{powerSource}` as the value of the `select` element. assert.match(code, /<\s*select\s+[\s\S]*value\s*=\s*\{\s*powerSource\s*\}/) ``` -You should set the value of the `select` element with `onChange` and `setPowerSource`. +You should set the value of the `select` element using `onChange` with an arrow function that implicitly returns to update the `powerSource` state with `setPowerSource`. ```js assert.match(code, /<\s*select\s+[\s\S]*onChange\s*=\s*\{\s*(e|\(\s*e\s*\))\s*=>\s*setPowerSource\s*\(\s*e\s*\.\s*target\s*\.\s*value\s*\)/)