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


import React from 'react';

// import all the components we are going to use
import {SafeAreaView, Text, View} from 'react-native';

// child component
const MyCustomTextWith = (props) => {
  return (
    <Text>
      Your First Name is {props.firstname}!
      and Last name is {props.secondname}
    </Text>
  );
};

// parent component
const App = () => {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          flex: 1
        }}>
        {/*Use of our custom component MyCustomTextWith*/}
        <MyCustomTextWith
          firstname="fName1"
          secondname="lname1"
        />
        {/*We are setting the props dynamically from the main UI 
           where we want to use it. We candynamically set the value 
           using props from master every time*/}
        <MyCustomTextWith
          firstname="fName2"
          secondname="lname2"
        />
      </View>
    </SafeAreaView>
  );
};

export default App;

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:


import React from 'react';

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: 'Data from parent'
        }
    }

    render(){
        const {data} = this.state;
        return(
            <div>
                <Child dataParentToChild = {data}/>
            </div>
        )
    }
}

class Child extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: this.props.dataParentToChild
        }
    }

    render(){
        const {data} = this.state;
        return(
            <div>
                {data}
            </div>
        )
    }
}

export 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:


import React from 'react';

function Parent(){
    const data = 'Data from parent';
    return(
        <div>
            <Child dataParentToChild = {data}/>
        </div>
    )
}

function Child ({dataParentToChild}){
    return(
        <div>
            {dataParentToChild}
        </div>
    )
}

export default Parent;

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.

Create a callback function in the parent component. This callback function will get the data from the child component.
Pass the callback function in the parent as a prop to the child component.
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:


import React from 'react';

class Parent extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            data: null
        }
    }

    handleCallback = (childData) =>{
        this.setState({data: childData})
    }

    render(){
        const {data} = this.state;
        return(
            <div>
                <Child parentCallback = {this.handleCallback}/>
                {data}
            </div>
        )
    }
}

class Child extends React.Component{

    onTrigger = (event) => {
        this.props.parentCallback("Data from child");
        event.preventDefault();
    }

    render(){
        return(
        <div>
            <form onSubmit = {this.onTrigger}>
                <input type = "submit" value = "Submit"/>
            </form>
        </div>
        )
    }
}

export 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.

React Native Props

what is props?

Props Example

App.js

More From React Native Tutorial

Basics

Advances

Error & Issue Solution

what is props?#

Props Example#

App.js#

share data between parent, child components#

More From React Native Tutorial#

Basics#

Advances#

Error & Issue Solution#

what is props?

Props Example

App.js

share data between parent, child components

More From React Native Tutorial

Basics

Advances

Error & Issue Solution