fix: 🐛 Add Implicit and normal return

✅ Closes: #162

Author: MatthysDev

challenges/foundation/05.md

@@ -42,9 +42,9 @@ export function StarshipCard() {
 ```javascript
 // Create a `./src/components/index.tsx`
 
-import ScreenContainer from './ScreenContainer';
-import Offline from './Offline';
-import Card from './Card';
+import ScreenContainer from "./ScreenContainer";
+import Offline from "./Offline";
+import Card from "./Card";
 
 export { ScreenContainer, Offline, Card };
 ```
@@ -55,11 +55,11 @@ From the another component, to import the files
 
 ```javascript
 // with `export default Card`
-import Card from './components/Card';
+import Card from "./components/Card";
 
 // with export function Card() { ... }
 // with exported index.tsx
-import { Card } from './components/Card';
+import { Card } from "./components/Card";
 ```
 
 ### Named Function Vs. Arrow Function
@@ -80,14 +80,37 @@ function Card(){
 
 Choose a solution and keep it concistent accross your stack.
 
+### Implicit return vs. normal return
+
+```javascript
+// ✅ function with implicit return
+const Item = ({ title }) => (
+ <View>
+ <Text>{title}</Text>
+ </View>
+);
+
+// ✅ function normal return
+const Item2 = ({ name }) => {
+ return (
+ <View>
+ <Text>{name}</Text>
+ </View>
+ );
+};
+```
+
+The first function (Item) uses an implicit return, which is a shorter syntax suitable for single-expression functions.
+The second function (Item2) uses a normal return, which allows for more complex function bodies and explicit handling of the return value. It also gives the ability to include additional logic before returning the JSX elements.
+
 ### One more thing
 
 There is a nice pattern to know: **renaming a component on the go**
 
 ```javascript
 // App.tsx
 
-import { LoginScreen as App } from './src/screens/LoginScreen';
+import { LoginScreen as App } from "./src/screens/LoginScreen";
 export default App;
 ```