1. Sending Information from a Parent Component to a Child Component

In React, information is usually passed from the parent component to the child component via props. This is a straightforward and direct way for the parent to transmit data to its children.

// Parent Component
function ParentComponent() {
  const message = "Message from Parent";
  return <ChildComponent message={message} />;
}

// Child Component
function ChildComponent(props) {
  return <Text>{props.message}</Text>;
}

2. Sending Information from a Child Component to a Parent

Passing information from the child to the parent is generally done through functions. The parent passes a function to the child component via props, and the child calls this function.

// Parent Component
class ParentComponent extends React.Component {
  handleChildData = (data) => {
    console.log(data);
  };

  render() {
    return <ChildComponent sendData={this.handleChildData} />;
  }
}

// Child Component
function ChildComponent(props) {
  const data = "Data from Child";
  return <Button title="Send to Parent" onPress={() => props.sendData(data)} />;
}

3. Bidirectional Communication between Parent and Child Component

Bidirectional communication combines the two methods above, allowing both the parent to pass data to the child and the child to communicate with the parent.

// ParentComponent.js

import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    // Step 1: Initialize parent's state
    this.state = {
      parentData: 'Data from Parent',
      childData: ''
    };
  }

  // Step 1: Method to update state with data from child
  receiveDataFromChild = (dataFromChild) => {
    this.setState({ childData: dataFromChild });
  }

  render() {
    return (
      <div>
        {/* Display data received from child */}
        <p>Data received from Child: {this.state.childData}</p>
        {/* Step 1: Passing state data and method to child as props */}
        <ChildComponent 
          parentData={this.state.parentData} 
          sendDataToParent={this.receiveDataFromChild} 
        />
      </div>
    );
  }
}

export default ParentComponent;

// ChildComponent.js

import React from 'react';
import PropTypes from 'prop-types';

function ChildComponent({ parentData, sendDataToParent }) {
  // Step 2: Using data from parent and method to send data back to parent
  const handleClick = () => {
    sendDataToParent('Data from Child');
  }

  return (
    <div>
      {/* Displaying data received from parent */}
      <p>{parentData}</p>
      {/* Button to trigger sending data to parent */}
      <button onClick={handleClick}>Send Data to Parent</button>
    </div>
  );
}

// Step 3: PropTypes for type checking
ChildComponent.propTypes = {
  parentData: PropTypes.string,
  sendDataToParent: PropTypes.func.isRequired
};

// Step 3: DefaultProps for default prop values
ChildComponent.defaultProps = {
  parentData: 'Default Parent Data'
};

export default ChildComponent;

4. Validating a Component’s Props via PropTypes

PropTypes provide a way to ensure that components receive the correct types of props. This helps to prevent bugs.

import PropTypes from 'prop-types';

function ChildComponent(props) {
  return <Text>{props.message}</Text>;
}

ChildComponent.propTypes = {
  message: PropTypes.string.isRequired,
};

5. Setting Default Prop Values for a Component via DefaultProps

defaultProps allows setting default values for props, ensuring that the component has all the data it needs for a proper rendering even if the parents do not provide some props.

ChildComponent.defaultProps = {
  message: "Default message",
};

Links and Resources