Navigate back to the homepage

React Native Props

Infinitbility
Props and State
January 15th, 2021 · 2 min read
React Native Props

This Article Part of React Native Tutorial Series want to start from scrach follow below link

https://infinitbility.com/react-native/table-of-contents

what is props?

Props are short for Properties. The simple rule of thumb is props should not be changed. In the programming world we call it “Immutable” or in simple english “Unchangeable”.

Props are Unchangeable — Immutable

Components receive props from their parent. These props should not be modified inside the component. In React and React Native the data flows in one direction -> From the parent to the child.

You can write your own components that use props. The idea behind props is that you can make a single component that is used in many different places in your app. The parent that is calling the component can set the properties, which could be different in each place. Props essentially help you write reusable code. This simple example shows how props are used.

Props Example

Here is the example code to understand it more easily

App.js

1import React from 'react';
2
3// import all the components we are going to use
4import {SafeAreaView, Text, View} from 'react-native';
5
6// child component
7const MyCustomTextWith = (props) => {
8 return (
9 <Text>
10 Your First Name is {props.firstname}!
11 and Last name is {props.secondname}
12 </Text>
13 );
14};
15
16// parent component
17const App = () => {
18 return (
19 <SafeAreaView style={{flex: 1}}>
20 <View
21 style={{
22 justifyContent: 'center',
23 alignItems: 'center',
24 flex: 1
25 }}>
26 {/*Use of our custom component MyCustomTextWith*/}
27 <MyCustomTextWith
28 firstname="fName1"
29 secondname="lname1"
30 />
31 {/*We are setting the props dynamically from the main UI
32 where we want to use it. We candynamically set the value
33 using props from master every time*/}
34 <MyCustomTextWith
35 firstname="fName2"
36 secondname="lname2"
37 />
38 </View>
39 </SafeAreaView>
40 );
41};
42
43export default App;

share data between parent, child components

  1. Passing Data From Parent to Child

    When you need to pass data from a parent to child class component, you do this by using props. For example, let’s say you have two class components, Parent and Child, and you want to pass a state in the parent to the child. You would do something like this:

    1import React from 'react';
    2
    3class Parent extends React.Component{
    4 constructor(props){
    5 super(props);
    6 this.state = {
    7 data: 'Data from parent'
    8 }
    9 }
    10
    11 render(){
    12 const {data} = this.state;
    13 return(
    14 <div>
    15 <Child dataParentToChild = {data}/>
    16 </div>
    17 )
    18 }
    19}
    20
    21class Child extends React.Component{
    22 constructor(props){
    23 super(props);
    24 this.state = {
    25 data: this.props.dataParentToChild
    26 }
    27 }
    28
    29 render(){
    30 const {data} = this.state;
    31 return(
    32 <div>
    33 {data}
    34 </div>
    35 )
    36 }
    37}
    38
    39export default Parent;

    As you can see, the parent component passes props to the child component and the child can then access the data from the parent via this.props. For the same example, if you have two function components instead of class components, you don’t even need to use props. You can do something like the following:

    1import React from 'react';
    2
    3function Parent(){
    4 const data = 'Data from parent';
    5 return(
    6 <div>
    7 <Child dataParentToChild = {data}/>
    8 </div>
    9 )
    10}
    11
    12function Child ({dataParentToChild}){
    13 return(
    14 <div>
    15 {dataParentToChild}
    16 </div>
    17 )
    18}
    19
    20export default Parent;
  2. Passing Data from Child to Parent

    many students ask a question to me about how to send data child component to parent component hear, you can use functions to send data to parent component learn with the below example.

    1. Create a callback function in the parent component. This callback function will get the data from the child component.
    2. Pass the callback function in the parent as a prop to the child component.
    3. The child component calls the parent callback function using props.

    ou have two class components, Parent and Child. The Child component has a form that can be submitted in order to send its data up to the Parent component. It would look something like this:

    1import React from 'react';
    2
    3class Parent extends React.Component{
    4 constructor(props){
    5 super(props);
    6 this.state = {
    7 data: null
    8 }
    9 }
    10
    11 handleCallback = (childData) =>{
    12 this.setState({data: childData})
    13 }
    14
    15 render(){
    16 const {data} = this.state;
    17 return(
    18 <div>
    19 <Child parentCallback = {this.handleCallback}/>
    20 {data}
    21 </div>
    22 )
    23 }
    24}
    25
    26class Child extends React.Component{
    27
    28 onTrigger = (event) => {
    29 this.props.parentCallback("Data from child");
    30 event.preventDefault();
    31 }
    32
    33 render(){
    34 return(
    35 <div>
    36 <form onSubmit = {this.onTrigger}>
    37 <input type = "submit" value = "Submit"/>
    38 </form>
    39 </div>
    40 )
    41 }
    42}
    43
    44export default Parent;

    As you can see, when the Child component is triggered, it will call the Parent component’s callback function with data it wants to pass to the parent. The Parent’s callback function will handle the data it received from the child.

More From React Native Tutorial

Basics

  1. Introduction To React Native
  2. React Native Environment Setup using expo
  3. React Native Environment Setup for windows
  4. React Native Environment setup on Mac OS
  5. React Native Environment setup on linux
  6. React Native Project Structure
  7. React Native State
  8. React Native Props
  9. React Native Styling
  10. React Native Flexbox
  11. React Native Text
  12. React Native Textinput
  13. React Native Commands
  14. React Native ScrollView

Advances

  1. React Native Dark Mode
  2. React Native Fonts
  3. React Native SQLite
  4. React Native DatepickerAndroid
  5. React native ScrollView scroll to position
  6. How to align icon with text in react native
  7. React Native Image
  8. React Native Firebase Crashlytics
  9. React Native Async Storage
  10. React Native Share

Error & Issue Solution

  1. Task :app:transformDexArchiveWithDexMergerForDebug FAILED In React Native
  2. Expiring Daemon because JVM heap space is exhausted In React Native
  3. Task :app:transformNativeLibsWithMergeJniLibsForDebug FAILED In React Native
  4. Unable to determine the current character, it is not a string, number, array, or object in react native
  5. App crashed immediately after install react native video or track player
  6. how to delete SQLite database in android react native
  7. React native material dropdown twice click issue
  8. How to get the current route in react-navigation?
  9. how to disable drawer on the drawer navigation screen?
  10. Image not showing in ios 14 react native

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

More articles from Infinitbility

React Native State

React Native State

React Native Tutorial - React Native State

January 12th, 2021 · 1 min read
React Native Project Structure

React Native Project Structure

React Native Tutorial - React Native Project Structure

January 9th, 2021 · 4 min read
© 2021 Infinitbility
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]