React Library is based on multiple components that separate the User Interface into several small reusable pieces.

In many cases, these small components have to send data between them, and props help in passing the data to the different components.

Props stand for Properties and is a keyword used in React.

These props pass the data between the different components.

The Props data flow is unidirectional which means that props pass the data one way from the parent to the child.

Props are immutable which means they are read-only and the data which comes from the parent to the child cannot be changed directly in the child components.

Only props cannot make the app dynamic and interactive. For making the app more interactive to the user we need to use state along with props.

States and props work great together. They working together form the data model of the application.

States helps in the data which can change on the basis of different user actions and the props are used for the data which can be immutable.

Example of use for Props in component

this example is based on our basic watch components code sample :

import React, {Component} from 'react';
import {View, Text, StyleSheet} from 'react-native';
interface IOwnProps {
  currentTime: string;
  currentDay: string;
}
​
type Props = IOwnProps;
​
export class WatchComponentView extends Component<Props> {
  constructor(props: Props) {
    super(props);
  }
​
  public render() {
    return (
      <View style={styles.containerCircle}>
        <View style={styles.CircleShapeView}>
          <Text style={styles.daysText}>{this.props.currentDay}</Text>
          <Text style={styles.timeText}>{this.props.currentTime}</Text>
        </View>
      </View>
    );
  }
}
​
export const ComponentView = WatchComponentView;
// CSS styles used
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  headerText: {
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: 'black',
    fontWeight: 'bold',
  },
  timeText: {
    top: 90,
    left: 60,
    fontSize: 25,
    color: '#C8C8C8',
  },
  daysText: {
    top: 90,
    left: 60,
    color: '#C8C8C8',
    fontSize: 25,
    paddingBottom: 0,
  },
  containerCircle: {
    top: 200,
    left: 60,
    flex: 1,
  },
  CircleShapeView: {
    width: 270,
    height: 270,
    borderRadius: 580 / 2,
    borderWidth: 10,
    borderColor: '#C8C8C8',
    backgroundColor: '#000000',
  },
});
​

This component can be used then from another component as below receiving as props the object defined in the IOwnProps.

import React, {Component} from 'react';
import {ComponentView} from './WatchComponent';
interface IState {
  currentTime: string;
  currentDay: string;
}
type Props = null;
export default class App extends Component<Props, IState> {
  public daysArray: string[] = [
    'sunday',
    'monday',
    'tuesday',
    'wednesday',
    'thursday',
    'friday',
    'saturday',
    'sunday',
  ];
  public timer: any = null;
  constructor(props: Props) {
    super(props);
    this.state = {currentTime: '', currentDay: ''};
  }
  // helper method to get current day and time
  getCurrentTime = () => {
    let hour: string = new Date().getHours().toString();
    let minutes: string = new Date().getMinutes().toString();
    let seconds: string = new Date().getSeconds().toString();
    let am_pm = 'pm';
    if (parseInt(minutes, 10) < 10) {
      minutes = '0' + minutes;
    }
​
    if (parseInt(seconds, 10) < 10) {
      seconds = '0' + seconds;
    }
​
    if (parseInt(hour, 10) > 12) {
      hour = (parseInt(hour, 10) - 12).toString();
    }
​
    if (parseInt(hour, 10) === 0) {
      hour = '12';
    }
​
    if (new Date().getHours() < 12) {
      am_pm = 'am';
    }
​
    this.setState({
      currentTime: hour + ':' + minutes + ':' + seconds + ' ' + am_pm,
    });
​
    this.daysArray.map((item, key) => {
      if (key === new Date().getDay()) {
        this.setState({currentDay: item.toUpperCase()});
      }
    });
  };
  // called before component destroyed
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  // called inmediately after component mounted
  componentDidMount() {
    this.timer = setInterval(() => {
      this.getCurrentTime();
    }, 1000);
  }
  // renders the content for the app
  render() {
    return (
      <ComponentView
        currentTime={this.state.currentTime}
        currentDay={this.state.currentDay}
      />
    );
  }
}
​

Example of methods as props

We can as well define methods as props that can be used to alter state in the caller component, in the code below, we define a methods that is used to perform state updates in the current component in a dummy variable of our state

 public handleStateChange(value: string) {
    this.setState({dummy: value});
  }

This kind of methods need to be binded in the constructor as below

 constructor(props: Props) {
    super(props);
    this.state = {currentTime: '', currentDay: '', dummy: ''};
    this.handleStateChange = this.handleStateChange.bind(this);
  }

Then we will pass this method as props to the component where used like the other props

 render() {
    return (
      <ComponentView
        currentTime={this.state.currentTime}
        currentDay={this.state.currentDay}
        handleStateChange={this.handleStateChange}
      />
    );
  }

And the component will include this methods in IOwnProps like below

 interface IOwnProps {
  currentTime: string;
  currentDay: string;
  handleStateChange: (value: string) => void;
}

And use it from Props to update the state of the caller component

public componentDidMount() {
    this.props.handleStateChange('test');
  }