Parent Child Communication in React JS

Parent and child components in React JS often need to communicate with each other. There are several ways to achieve this, such as passing data via props, using callbacks, or utilizing context.

One common method is to pass data from a parent component to a child component via props. For example, in the parent component:

class ParentComponent extends React.Component {
  state = {
    message: "Hello from Parent!"
  }

  render() {
    return <ChildComponent message={this.state.message} />;
  }
}

And in the child component:

class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

Another approach is to pass callback functions from the parent to the child component, allowing the child to trigger actions in the parent. For example:

class ParentComponent extends React.Component {
  state = {
    message: ""
  }

  handleMessageChange = (newMessage) => {
    this.setState({ message: newMessage });
  }

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

And in the child component:

class ChildComponent extends React.Component {
  handleClick = () => {
    this.props.handleMessageChange("Hello from Child!");
  }

  render() {
    return <button onClick={this.handleClick}>Update Parent Message</button>;
  }
}

These are just a few examples of how parent and child components can communicate in React JS. By understanding and utilizing these techniques, you can create more dynamic and interactive applications.