"Parsing error: Argument expression expected. eslint" with Typescript map function in React

Question

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?

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

Answer 1

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.

Answer 2

您不能使用带有关键字的变量，例如 if 或 var 作为 js 中的变量，因此您需要重命名变量的名称，因为它应该可以工作

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