CODEWITHSUNDEEP
javascriptreactjs
user9686855
user9686855

Reputation:

How can i access the main component from not its child? reactjs

I know that i can access the parent from the childen with the children's props, but what if i want to communicate the parent with not its direct children. Let me explain: enter image description here

The App renders the first Component, then the Components renders its children. I have a function in the Components that gives the ability to the user to create a new element.

But the whole process is controlled by the server and the database. Only the App gets the database. If i push a new element to the database, only the app could know it.

How to communicate to the app that it need to rerender the tree again? I need to set a prop to the Components which communicate the parents all the way up to the App? Any ideas?

Upvotes: 0

Views: 120

Answers (2)

Dan Abramov
Dan Abramov

Reputation: 268255

How to communicate to the app that it need to rerender the tree again? I need to set a prop to the Components which communicate the parents all the way up to the App? Any ideas?

Yes, that's how you generally do it. For example, a child component may accept a prop called onAddItem. A child component just calls onAddItem() when "Add" button is clicked, and the parent (App in your example) specifies the implementation.

handleAddItem() {
  // Do something, e.g. this.setState
}

render() {
  return <Child onAddItem={() => this.handleAddItem()} />;
}

If you have components in the middle, they can also pass onAddItem from the top, e.g.

render() {
  return <Child onAddItem={this.props.onAddItem} />;
}

This way you can "plumb" it through multiple levels.

"Lifting State Up" and "Thinking in React" guide you through how this works in more detail.

As an escape hatch, if the plumbing gets too deep to be practical (more than 5 levels), you may consider using context API to implicitly pass a bunch of values (potentially including functions like handleAddItem) to grandchildren. But don't use context until you're very familiar with normal patterns of prop passing in React because it's an advanced feature and makes the code less explicit.

Upvotes: 1

Umair Abid
Umair Abid

Reputation: 1463

You trigger events (the ideal approach). Passing a reference of parent component is not a good practice, since in that way child can access the state and all the methods of parent without explicitly asking for it. Its bad because it discourages the use of re usability of components. For example if some other component renders that child component, it will result into unwanted errors since it might not have the properties and methods which the other parent had. Following example might help

class Parent1 extends React.Component {

    constructor() {
        this.state = {myData: []}
    }

    render() {
        <Child parent={this} />
    }
}

class Child extends React.Component {

    render() {
        var data = this.props.parent.state.myData // child accessing parent props directly from reference
    }

}

class Parent1 extends React.Component {

    constructor() {
        this.state = {otherData: []}
    }

    render() {
        <Child parent={this} /> // Child will throw error because it won't be able to find myData
    }
}

So don't send the parent reference down, you can however send the exact stuff which child needs in props but this can be cumbersome in case you need to send something 5 or 6 level down. To tackle this you can either user flux or redux to trigger actions from your child components to which your main component will be listening to. You can learn more about flux from here https://facebook.github.io/flux/docs/in-depth-overview.html

Upvotes: 0

Related Questions