Day 4

Author: nerdjfpb

App.js

@@ -1,18 +1,15 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
+import React, { useState } from 'react'
+import { StyleSheet, View } from 'react-native'
 
-export default class App extends React.Component {
-	state = {
-		counter: 0
-	}
+import Counter from './Counter'
 
-	render() {
-		return (
-			<View style={styles.container}>
-				<Text style={styles.mainText}>Counter: {this.state.counter}</Text>
-			</View>
-		)
-	}
+export default function App() {
+	const [counter, setCounter] = useState(0)
+	return (
+		<View style={styles.container}>
+			<Counter counter={counter} />
+		</View>
+	)
 }
 
 const styles = StyleSheet.create({
@@ -21,9 +18,5 @@ const styles = StyleSheet.create({
 		backgroundColor: '#fff',
 		alignItems: 'center',
 		justifyContent: 'center'
-	},
-	mainText: {
-		backgroundColor: '#5CA2FA',
-		padding: 20
 	}
 })

Counter.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import { StyleSheet, Text } from 'react-native'
+
+export default function Counter(props) {
+	return <Text style={styles.mainText}>Counter:{props.counter}</Text>
+}
+
+const styles = StyleSheet.create({
+	mainText: {
+		backgroundColor: '#5CA2FA',
+		padding: 20
+	}
+})

readme.md

@@ -13,3 +13,4 @@ You can check the commits to find the part by part codes.
 - [Day 1 - React Native Intro](https://www.instagram.com/p/B-EsmshATpS/)
 - [Day 2 - Stylesheet in React Native](https://www.instagram.com/p/B-JxJdzlf5E/)
 - [Day 3 - State in React Native](https://www.instagram.com/p/B-PK5LmAkKi/)
+- [Day 4 - Props in React Native](https://www.instagram.com/p/B-UFIC2gyIl/)