React Native Arrow Function

React Native
1

Hi
I am relatively new to React Native and hence I stumbled upon something by accident.
I was following the React Native Advanced course by Mosh and coding along. I wrote up the following lines which is from Native Features No.10 Building ImageInputList basics.

 <View style={styles.container}>
      {imageUris.map((uri) => {
        <ImageInput
          imageUri={uri}
          key={uri}
          onChangeImage={(uri) => onRemoveImage(uri)}
        />;
      })}
      <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
    </View>

I spent a while why my code is not working even after selecting an image from media library it is not getting displayed. Finally I figured out that in the first arrow function I accidentally used {} instead of (). The correct code is as below

<View style={styles.container}>
      {imageUris.map((uri) => (
        <ImageInput
          imageUri={uri}
          key={uri}
          onChangeImage={(uri) => onRemoveImage(uri)}
        />
      ))}
      <ImageInput onChangeImage={(uri) => onAddImage(uri)} />
    </View>

So my question is can someone explain when is it appropriate to use a {} and () in an arrow function? I am very confused with the syntax.

Appreciate your help

Thank you.

2

Javascript treats a line break in the code like a semikolon. If you format an expression with line breaks for readability you wrap that expression in () to avoid that each line is treated as a separate statement.

If I remember correctly Javascript would also treat a semicolon in a JSX expression as an end of a statement so you need to wrap single line JSX expressions with semicolons (e.g. as in &nbsp;) in ().

You use {} to group multiple statements into a code block.

Note that in in the latter example there is an implicit return in front of the opening parenthesis since it is an expresssion. In the former example you’d have to code that return explicitly:

      {imageUris.map((uri) => {
         return <ImageInput
                   imageUri={uri}
                   key={uri}
                   onChangeImage={(uri) => onRemoveImage(uri)}
                />;
      })}
3

Thanks for your explanation Sam! It certainly helped me understand the concept.

4

Always write your code after mosh save it on his computer during the tutorial because after that his Vs code automatically adds () to his arrow function. Check you onAddImage area where u wrote the code there is a wrong initialization somewhere