How can I update the parent’s state in React?

by

For child-parent communication you should pass a function setting the state from parent to child, like this


class Parent extends React.Component {
  constructor(props) {
    super(props)

    this.handler = this.handler.bind(this)
  }

  handler() {
    this.setState({
      someVar: 'some value'
    })
  }

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

class Child extends React.Component {
  render() {
    return <Button onClick = {this.props.handler}/ >
  }
}

This way the child can update the parent’s state with the call of a function passed with props.

But you will have to rethink your components’ structure, because as I understand components 5 and 3 are not related.

One possible solution is to wrap them in a higher level component which will contain the state of both component 1 and 3. This component will set the lower level state through props.

More Related Contents:

  1. When to use ES6 class based React components vs. functional ES6 React components?
  2. Why and when do we need to bind functions and eventHandlers in React?
  3. React-Router: No Not Found Route?
  4. What is the right way to use Jquery in React?
  5. How to async await in react render function?
  6. Error: [PrivateRoute] is not a component. All component children of must be a or
  7. What is the difference between React Native and React?
  8. React JSX: selecting “selected” on selected option
  9. React.js: Set innerHTML vs dangerouslySetInnerHTML
  10. Objects are not valid as a React child (found: [object Promise])
  11. React – getting a component from a DOM element for debugging
  12. ReactJS SyntheticEvent stopPropagation() only works with React events?
  13. react.js Replace img src onerror
  14. React | How to detect Page Refresh (F5)
  15. Do I have to store tokens in cookies or localstorage or session?
  16. How to handle calling functions on data that may be undefined?
  17. Why is React not rendering my component state correctly?
  18. I can’t reference an image in Next.js
  19. Update one of the objects in array, in an immutable way
  20. What does useCallback/useMemo do in React?
  21. Is there a way to render multiple React components in the React.render() function?
  22. How to hide bottom navigation bar on a specific screen in react native?
  23. Do we still need functional setState way in react hooks?
  24. React 18 strict mode causing component to render twice [duplicate]
  25. Reactjs-setState previous state is the first argument, props as the second argument
  26. minimise the code since I am using the same code only the content in p tags changes and component AccordionHeader header changes
  27. Only numbers. Input number in React
  28. Disable chrome react DevTools for production
  29. You’re importing a component that needs useState. It only works in a Client Component, but none of its parents are marked with “use client”
  30. React props: Should I pass the object or its properties? Does it make much difference?

Leave a Comment