React js change child component s state from parent component

Question

I have two components   Parent Component from which I want to change child component s state     class ParentComponent extends Component      toggleChildMenu                            render          return           lt div gt            lt button onClick  toggleChildMenu bind this   gt             Toggle Menu from Parent           lt  button gt            lt ChildComponent   gt          lt  div gt                       And Child Component     class ChildComponent extends Component      constructor props         super props        this state            open  false                   toggleMenu          this setState          open   this state open                    render          return           lt Drawer open  this state open   gt                       I need to either change Child Component s open state from Parent Component  or call Child Component s toggleMenu   from Parent Component when Button in Parent Component is clicked

User · Answer

You can send a prop from the parent and use it in child component so you will base child s state changes on the sent prop changes and you can handle this by using getDerivedStateFromProps in the child component

User · Answer

The state should be managed in the parent component  You can transfer the open value to the child component by adding a property   class ParentComponent extends Component      constructor props          super props         this state             open  false                 this toggleChildMenu   this toggleChildMenu bind this            toggleChildMenu           this setState state   gt             open   state open                     render           return             lt div gt              lt button onClick  this toggleChildMenu  gt                Toggle Menu from Parent             lt  button gt              lt ChildComponent open  this state open    gt            lt  div gt                     class ChildComponent extends Component       render           return             lt Drawer open  this props open   gt

User · Answer

The parent component can manage child state passing a prop to child and the child convert this prop in state using componentWillReceiveProps   class ParentComponent extends Component     state     drawerOpen  false     toggleChildMenu        gt        this setState   drawerOpen   this state drawerOpen          render         return          lt div gt           lt button onClick  this toggleChildMenu  gt Toggle Menu from Parent lt  button gt           lt ChildComponent drawerOpen  this state drawerOpen    gt         lt  div gt               class ChildComponent extends Component     constructor props        super props      this state           open  false              componentWillReceiveProps props        this setState   open  props drawerOpen           toggleMenu         this setState         open   this state open               render         return  lt Drawer open  this state open    gt

User · Answer

You can use the createRef to change the state of the child component from the parent component  Here are all the steps    Create a method to change the state in the child component   2 - Create a reference for the child component in parent component using   React createRef     3 - Attach reference with the child component using ref      4 - Call the child component method using this yor-reference current method    Parent component   class ParentComponent extends Component   constructor     this changeChild React createRef       render         return          lt div gt           lt button onClick  this changeChild current toggleMenu    gt            Toggle Menu from Parent          lt  button gt           lt ChildComponent ref  this changeChild    gt         lt  div gt                  Child Component   class ChildComponent extends Component     constructor props        super props       this state           open  false               toggleMenu      gt        this setState         open   this state open                render         return          lt Drawer open  this state open   gt

User · Answer

Above answer is partially correct for me  but In my scenario  I want to set the value to a state  because I have used the value to show toggle a modal  So I have used like below  Hope it will help someone   class Child extends React Component     state         visible false         handleCancel    e    gt          e preventDefault          this setState   visible  false             componentDidMount         this props onRef this         componentWillUnmount         this props onRef undefined         method         this setState   visible  true            render         return   lt Modal title  My title   visible  this state visible  onCancel  this handleCancel  gt          Content        lt  Modal gt          class Parent extends React Component     onClick        gt        this child method      do stuff       render         return          lt div gt           lt Child onRef  ref   gt   this child   ref     gt           lt button onClick  this onClick  gt Child method   lt  button gt         lt  div gt                 Reference - https   github com kriasoft react-starter-kit issues 909 issuecomment-252969542

[javascript] React js change child component's state from parent component

Examples related to javascript

Examples related to reactjs

Examples related to react-state