Using Variable inside jsx loop

I have loop like this inside jsx render

return(
<View>
   {[...Array(10)].map((x, i) => (
          <Input
            placeholder="Category {i}"
          />
        ))}
</View>
)

I am trying to create 10 inputs dynamically using above code , here I want to use the variable I inside place holder so I get the inputs with placeholder Category 1 , Category 2 etc., but my app is crashing without any error , what is the proper way to use variable inside the map of jsx.

>Solution :

Maybe try this

return (
  <View>
    {new Array(10).map((x, i) => (
      <Input placeholder={`Category ${i + 1}`} />
    ))}
  </View>
);

Refer to this

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals