Build a Football Player Card Builder - Step 48

Curriculum Help
1

Tell us what’s happening:

I think I’m setting the value right, but I can’t work out how to set the onChange function. I’m passing in e but e.target.value doesn’t work, and I’m not sure I’m putting it in an object correctly.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: index.tsx */
{/* User Editable Region */}
                <input id="name" className="input" value={player.name} onChange={
                  (e) => setPlayer({...player, e.target.value}) 
                } type="text" />
{/* User Editable Region */}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/150.0.0.0 Safari/537.36

Challenge Information:

Build a Football Player Card Builder - Step 48

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/workshop-build-a-football-player-card-builder/69e8b296388ebbd517692bd6.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @neat-hannah

Did you notice the squiggly red line in the editor?

image
image383×360 13.7 KB

The instructions ask to you:

and name set to e.target.value

Remove all the white space before the e parameter.

Happy coding

3

I’m not sure that’s done anything at all

<input id="name" className="input" value={player.name} onChange={(e) => setPlayer({...player, e.target.value})} type="text" />
4

I’ve got rid of all of the squiggles with

<input id="name" className="input" value={player.name} onChange={(e) => setPlayer({name: e.target.value, ...player})} type="text" />```

but two tests are still not passing:

Error: index.tsx(115,100): error TS2783: 'name' is specified more than once, so this usage will be overwritten.

1. Your name input value should be bound to the player state name field.
3. The onChange handler should call setPlayer with setPlayer having an object that spreads player and sets name to e.target.value.
5

Hi @neat-hannah

Try changing the order of the parameters.

Happy coding