mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-19 21:09:51 +08:00
fix(curriculum): update Step 12 instructions in the superhero application form workshop (#60803)
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
parent
49fbe88369
commit
4342119e21
@ -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*\}/)
|
||||
|
||||
@ -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*\)/)
|
||||
|
||||
Loading…
Reference in New Issue
Block a user