React js change child component’s state from parent component

by

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 => ({
        open: !state.open
      }));
   }

   render() {
      return (
         <div>
           <button onClick={this.toggleChildMenu}>
              Toggle Menu from Parent
           </button>
           <ChildComponent open={this.state.open} />
         </div>
       );
    }
}

class ChildComponent extends Component {
    render() {
      return (
         <Drawer open={this.props.open}/>
      );
    }
}

More Related Contents:

  1. How to avoid bind or inline arrow functions inside render method
  2. Make React useEffect hook not run on initial render
  3. React ‘cannot read property of undefined’ when using map
  4. When to use functional setState
  5. How to pass data from a page to another page using react router
  6. How to call loading function with React useEffect only once
  7. Applying className/onClick/onChange not working on Custom React Component
  8. How to use componentWillMount() in React Hooks?
  9. Is it possible to share states between components using the useState() hook in React?
  10. Why is immutability so important (or needed) in JavaScript?
  11. Multiple path names for a same component in React Router
  12. this.setState isn’t merging states as I would expect
  13. setInterval in a React app
  14. Warning: Each child in a list should have a unique “key” prop even tho it has unique key React
  15. Can’t type in React input text field
  16. Uncaught Error: Invariant Violation: findComponentRoot(…, …$110): Unable to find element. This probably means the DOM was unexpectedly mutated
  17. I am getting error in console “You need to enable JavaScript to run this app.” reactjs
  18. Error: How to serialize data from getStaticProps : Next.js
  19. I can’t reference an image in Next.js
  20. Update one of the objects in array, in an immutable way
  21. What does useCallback/useMemo do in React?
  22. Is there a way to render multiple React components in the React.render() function?
  23. How to hide bottom navigation bar on a specific screen in react native?
  24. Use Object.assign or Spread Operator in React/Redux? Which is a better practise
  25. Do we still need functional setState way in react hooks?
  26. React 18 strict mode causing component to render twice [duplicate]
  27. Reactjs-setState previous state is the first argument, props as the second argument
  28. useMemo vs. useEffect + useState
  29. Difference between React Component and React Element
  30. Want to have an event handler for the browser’s back button with next.js

Leave a Comment