Like other component frameworks, React supports parent-child component interaction by using props. Every component in React has an accessible props property, which is a key-value object containing all the data passed in from the parent component.

Consider the following example:

import React from 'react';
 
class Child extends React.Component {
  render() {
    return (
      <span>Hello {this.props.greet}</span>
    );
  }
}
 
export default Child;

The Child component is a simple component that renders a span element with some greeting text. Importantly, it uses the props object while rendering, meaning it expects a text property to be passed down from the parent. To pass down expected props, a parent component simply needs to specify those as simple HTML-like attributes, as follows:

import React from 'react';
import Child from './Child';
 
class Parent extends React.Component {
  render() {
    return (
      <div>
        <Child text='Props and State' />
      </div>
    );
  }
}
 
export default Parent;

The props object keys, like any plain JavaScript object, can contain any value. The parent component can pass down primitives, objects, arrays, and even functions. Additionally, the props object is treated as immutable and shouldn't be modified in the child component.

The other form of interaction is to allow a child to notify the parent when something occurs. While Angular uses events, React uses a callback approach. A parent component can pass down a function as a prop that the child can execute when desired. Here's an example:

class Child extends React.Component {
  render() {
    return (
      <div>
        <span>Hello {this.props.greet}</span>
        <button onClick={this.props.onUpdate}></button>
      </div>
    );
  }
}
 
class Parent extends React.Component {
  onUpdate = () => {
    console.log('Child triggered callback');
  };
 
  render() {
    return (
      <div>
        <Child text='Props and State' onUpdate={this.onUpdate} />
      </div>
    );
  }
}

The parent component passes down a function named onUpdate as a prop. Then the child component uses this prop and binds it to the button's click event.

Evident from this example, there are additional things you should pay attention to:

• Callbacks and lexical this: Similar to dealing with standard HTML DOM events, when class instance functions are propagated or used in JSX, it might lose the context of having this set to the class instance. To ensure it remains the class instance, be sure to use arrow functions or the bind JavaScript method.

• DOM event names JSX syntax: React uses a specific format with DOM event names— on<Event>. It starts with the on keyword, followed by the event name with its first letter capitalized. For instance, to bind the click event, you use onClick in JSX.

Lastly, if you need a component to use fallback default values for unprovided props, you can use React's feature of default props, as follows:

class Child extends React.Component {
  static defaultProps = {
    greet: 'Default text',
    onUpdate: () => {}, // do nothing
  };
 
  render() {
    return (
      <div>
        <span>Hello {this.props.greet}</span>
        <button onClick={this.props.onUpdate}></button>
      </div>
    );
  }
}

You can define a static key-value defaultProps property on your component to apply default prop values. React enables us to populate the props object with the missing unprovided keys specified in the default props object.