How to Pass Props from Child Components to Parent Components in React.js?

Passing Props to Parent Components in React.js

When working with parent-child relationships in React.js, it may not be immediately evident how to pass a child component's props to its parent. However, there is a straightforward approach that avoids relying on events or complex configurations.

Identifying the Problem

The issue arises when attempting to directly pass a child's props to its parent using events like onClick. Attempting to access the child's props through events raises the question of why such an approach would be necessary, given that the parent already possesses those props.

A Simpler Approach

A more streamlined solution involves utilizing the fact that the parent already has access to its child's props and using them directly:

// Child component
render() {
  return <button onClick={this.props.onClick}>{this.props.text}</button>;
}

// Parent component (with single child)
render() {
  return <Child onClick={this.handleChildClick} text={this.state.childText} />;
}

// Parent component (with list of children)
render() {
  const children = this.state.childrenData.map(childData => {
    return <Child onClick={this.handleChildClick.bind(null, childData)} text={childData.childText} />;
  });

  return <div>{children}</div>;
}

Avoiding Over-Coupling

Solutions that involve passing the entire child component to the parent via onClick handlers are not advisable, as they introduce unnecessary coupling and compromise encapsulation. Instead, it is preferable to limit interaction between components to their respective interfaces.

The above is the detailed content of How to Pass Props from Child Components to Parent Components in React.js?. For more information, please follow other related articles on the PHP Chinese website!