Reactjs child component render

Question

I have a parent component and child component called Card wrapped inside it. Card is the third party component which render set of cards and has css transisioning affects in it like drag and change the layoout. The issue is when the card change the layout i want to handle in parent component. Currently card layout state is set in child which i dont have access. How we can achieve this objective when child component layout change parent should get that change

score 0 · Answer 1 · answered Feb 09 '18 at 20:05

0

You can pass the handle function from your parent to your child. Then, when an event on your child is triggered, you can do whatever you want (e.g. set state) on you parent component.

class Parent extends React.Component {
  onChildLayoutChange = () => {
    // do what you want to do with the parent component on child change here
  }

  render() {
    return <Child onLayoutChange={this.onChildLayoutChange} />    
  }
}

answered Feb 09 '18 at 20:05

Tomas Dohnal

1,815
2
16
16

Actually here the problem is child component is third party component which we dont have control to change – Gautham Shetty Feb 09 '18 at 20:20
Okay. So maybe the solution could be that you set your child as a ref in your parent and then add an event listener on that ref. Something similar to this: https://stackoverflow.com/questions/36180414/reactjs-add-custom-event-listener-to-component – Tomas Dohnal Feb 09 '18 at 20:33

Reactjs child component render

1 Answers1