state and props
This tutorial is purely written for beginners so we are just doing basic with state and props and very soon I will come with advance comparison and usage of state and props.
Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside. State data can be modified by its own component, but is private (cannot be accessed from outside)
State
A state is a revised structure that is used to contain data or details about a component and may change over time. A change in state may occur in response to a user action or a program event. It is the heart of the react component that determines the performance of an component and how it will contribute. The state should be kept as simple as possible. It represents the component’s local state or information. It can be accessed or modified only within component.
Following example explain the basic use of state within a component.
Here we are updating state whenever user clicked the button the value of count is incremented and the title of button gets changed.
import React, {useState} from 'react'
import {View, TouchableOpacity, Text} from 'react-native'
const StateExample = () => {
const [title, setTitle] = useState('Click me')
let [count, setCount] = useState(0)
const onPress = () => {
setTitle('Clicked!')
setCount(count++)
}
return (
onPress()} > {title} {count})
}
const styles = StyleSheet.create({
body: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
button: {
width: 100,
height: 30,
backgroundColor: 'pink',
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
color: 'white'
}
})
export default StateExample
Wow you have done miracle. 🎉 🎊
Now let’s move forward and learn about props.
props
Props are read-only components. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes. It allows passing data from one component to other components. It is similar to function arguments and can be passed to the component the same way as arguments passed in a function. Props are immutable so we cannot modify the props from inside the component.
import React from 'react'
import { TouchableOpacity, Text, StyleSheet } from 'react-native'
const Parent = ({ onPress, title, count }) => {
return (
{title} {count})
}
const styles = StyleSheet.create({
button: {
width: 100,
height: 30,
backgroundColor: 'pink',
justifyContent: 'center',
alignItems: 'center'
},
buttonText: {
color: 'white'
}
})
export default Parent
We have passed three props to this parent function i.e. onPress, title, count and we can access them from any component just by importing parent component in that child component.
Here is the code for child component
import React, {useState} from 'react'
import {View} from 'react-native'
import Parent from './Parent'
const Child = () => {
const [title, setTitle] = useState('Click me')
let [count, setCount] = useState(0)
const onPress = () => {
setTitle('Clicked!')
setCount(count++)
}
return (
onPress()} title={title} count={count} />)
}
const styles = StyleSheet.create({
body: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
})
export default Child
I hope now you have and idea about state and props and you can differentiate between state and props.
Good Luck 🎉 🎊.
Feel free to ask any question in the comment section.
Please do follow me on blogspot. https://fiyaz2110.blogspot.com/