2

From this line of code

{inputFields.map(if => <Input inputField={if} /> )}

I am getting this error on the word map

Parsing error: Argument expression expected.eslint

inputFields is inside a form, which is inside a div

<div>
    <form>
        {inputFields.map...}
    </form>
</div

And input fields is an array

inputFields: InputField[]

This answer suggests that this could have something to do with the typescript version.

In my package.json, I have that I'm using "typescript": "^3.8.3", but in the bottom right, I think it's saying that I'm using version 4.0.2?

enter image description here

When I click on that number, I can change the number to 3.9.7 but that doesn't change the error

Other answers that I've seen are not relevant to my use case with the map function

Sam
  • 1,765
  • 11
  • 82
  • 176

2 Answers2

7

if is a keyword in Javascript. Try renaming your variable:

{inputFields.map(field => <Input inputField={field} /> )}

Statements vs Expressions

An expression is code that resolves to a value

const add = (a, b) => a + b
add(10, 20) // => 30 
'Hello' // => 'Hello'

A statement is code that makes something happen

if (x < 10) // doesn't resolve
break // doesn't resolve
switch // doesn't resolve

Therefore the warning: "“Parsing error: Argument expression expected. eslint” is telling you that an expression (something that resolves to a value) is expected but instead you have passed a statement (which cannot be resolved to a value)

You cannot assign a statement to a variable, only expressions.

Alex Mckay
  • 3,463
  • 16
  • 27
  • Yeah that did it, sorry about that, just wasn't clueing in. I'll accept your answer but SO is telling me I have to wait 5 minutes – Sam Sep 17 '20 at 21:12
  • Don't worry about it. Does the "Parsing error: Argument expression expected.eslint" warning make sense now? – Alex Mckay Sep 17 '20 at 21:16
  • No, it's still kinda jargon to me. Is it saying that the map function is expecting an argument, but I'm passing it an if statement, which doesn't count as an argument? – Sam Sep 17 '20 at 21:17
  • You are pretty much right, I've updated the answer which should clear up your confusion. – Alex Mckay Sep 17 '20 at 21:25
  • Thanks, the extra explanation helps – Sam Sep 17 '20 at 21:34
  • Thank you, also works with other reserved words (I was trying to do `imports.map(import => /* ... */)`) – Robin Métral Sep 20 '21 at 15:37
1

you cant use a variable with a keyword that holding in the language like if or var as the variable in js so you need to rename the name of the variable as you want it should work

{inputFields.map((data)=> <Input inputField={data} /> )}
Mohammed Al-Reai
  • 2,344
  • 14
  • 18