Mapping over object gives error Identifier expected. ts(1003) when using key

Question

I have this object in its parent components and am passing it down to the child component then mapping over it then after I have mapped I try to use otherPokemon.base.[key] and this gives me an error right after the period. Here is the object:

{
    pokemon1: {
        name: "Pikachu",
        image: "https://raw.githubusercontent.com/Purukitto/pokemon-data.json/master/images/pokedex/thumbnails/025.png",
        description: "While sleeping, it generates electricity in the sacs in its cheeks. If it\u2019s not getting enough sleep, it will be able to use only weak electricity.",
        base: {
            "HP": 35,
            "Attack": 55,
            "Defense": 40,
            "SpAttack": 50,
            "SpDefense": 50,
            "Speed": 90,
        },
    },
    pokemon2: {
        name: "Squirtle",
        image: "https://raw.githubusercontent.com/Purukitto/pokemon-data.json/master/images/pokedex/thumbnails/007.png",
        description: "Squirtle\u2019s shell is not merely used for protection. The shell\u2019s rounded shape and the grooves on its surface help minimize resistance in water, enabling this Pok\u00e9mon to swim at high speeds.",
        base: {
            "HP": 44,
            "Attack": 48,
            "Defense": 65,
            "SpAttack": 50,
            "SpDefense": 64,
            "Speed": 43
        },
    }
}

then in the child component:

<List component="div" disablePadding>
          {Object.entries(pokemon.base).map(([key, value]) => {
            console.log(otherPokemon.base.[key])
            return(
            <ListItem>
                <ListItemText>{key + ": "}<span className={value > otherPokemon.base.[key] ? classes.more : classes.less}>{value}</span></ListItemText>
            </ListItem>)
          })}
        </List>

the code actually works but the file becomes red and the error bit gets a red underline saying:

Any help would be appreciated :)

This is warning for typescript. If you work with JS, you should be able to disable it in your ide. — capchuck, Sep 03 '21 at 15:14
I'm suprise this work. Change `otherPokemon.base.[key]` to `otherPokemon.base[key]` — Patfreeze, Sep 03 '21 at 15:14
@2F33T maybe this can help: https://stackoverflow.com/questions/42632215/how-to-disable-typescript-warnings-in-vscode#:~:text=In%20the%20Extensions%20tab%20on,an%20Extension%20and%20click%20Disable%20. — capchuck, Sep 03 '21 at 15:16
HOLY CRAP YOU FIXED IT Patfreeze thank you i have been pulling my hair out for an hour — m.said, Sep 03 '21 at 15:16

score 1 · Accepted Answer · answered Sep 03 '21 at 15:21

1

Thanks to Patfreeze the problem was solved the mistake was the i had an extra period in the code: //Original

otherPokemon.base.[key]

//Fixed

otherPokemon.base[key]

answered Sep 03 '21 at 15:21

m.said

84
1
9

Mapping over object gives error Identifier expected. ts(1003) when using key

1 Answers1