Build a Football Player Card Builder - Step 22

Curriculum Help
1

Tell us what’s happening:

My destructuring isn’t working, even though I think I’m following the example in the step.

Your code so far

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


/* file: styles.css */


/* file: index.tsx */
{/* User Editable Region */}

export const PlayerCard = (({ player }: { player: PlayerData })) => {

{/* User Editable Region */}

This is the error:

Error: index.tsx(24,31): error TS18004: No value exists in scope for the shorthand property 'player'. Either declare one or provide an initializer.
index.tsx(24,39): error TS1005: ')' expected.
index.tsx(24,51): error TS7031: Binding element 'PlayerData' implicitly has an 'any' type.
index.tsx(24,63): error TS1005: ',' expected.
index.tsx(24,64): error TS1134: Variable declaration expected.
index.tsx(24,66): error TS1005: ';' expected.
index.tsx(81,11): error TS2604: JSX element type 'PlayerCard' does not have any construct or call signatures.
index.tsx(81,11): error TS2786: 'PlayerCard' cannot be used as a JSX component.
  Its type '{ player: any; }' is not a valid JSX element type.

Your browser information:

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

Challenge Information:

Build a Football Player Card Builder - Step 22

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

2

Hi @neat-hannah

image
image383×120 6.34 KB

Notice the red squiggly lines in the editor.

Compare your code to the sample code.

Happy coding

3

As far as I can tell, it does look like the sample code, and I don’t know what’s causing the red squiggles. I presume that’s because of my syntax, but the squiggles don’t show what specifically is wrong with the syntax.

4

Hi @neat-hannah

Here is the sample code:

({ user }: { user: UserData })

Looks like your code has double round braces.

Happy coding