How to set one component’s state from another component in React

by

Welcome to SO!

Setting the parent state from the child:

If you want your child component to have access to your parent component’s state, just pass setState() as a prop in your parent class, like so…

<PostForm
    setParentState={(state) => this.setState(state)}
/>

Then, later in PostForm.js, just set the parent state like so….

this.props.setParentState(newParentStateObject);

Or, you can even just do….

<PostForm
    postform={this}
/>

And later on, you can call anything in postform with this.props.postform.anyFunctionEver().

Setting the child state from the parent:

Suppose you want to do the opposite now: update the state of the child component from the parent? That’s just as easy, set a reference when defining <PostForm/>…

<PostForm
    ref={(instance) => {this.postform = instance}}
/>

Then you can set the postform’s state directly in your parent class…

this.postform.setState(newChildStateObject);

A lot can happen with the state, so if you’re not sure, try making a testFunc() {console.log('test');}, and then try passing/activating this between parent and child.

More Related Contents:

  1. Can you force a React component to rerender without calling setState?
  2. What is the best way to trigger onchange event in react js
  3. sh: react-scripts: command not found after running npm start
  4. React-hooks. Can’t perform a React state update on an unmounted component
  5. Handling errors with react-apollo useMutation hook
  6. How to use refs in React with Typescript
  7. In general is it better to use one or many useEffect hooks in a single component? [closed]
  8. NextJS environment variables aren’t working
  9. My create-react-app is failing to compile due to ESLint error
  10. Add element to a state React
  11. How can I reset a react component including all transitively reachable state?
  12. How to use the increment operator in React
  13. Using React-Router with a layout page or multiple components per page
  14. Use history.push in action creator with react-router-v4?
  15. Getting error Cannot read property ‘setState’ of undefined
  16. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  17. React: Parent component re-renders all children, even those that haven’t changed on state change
  18. React Hooks: how to wait for the data to be fetched before rendering
  19. Module not found: Error: Package path . is not exported from package
  20. Get form data in React
  21. Media queries in MUI components
  22. React with Typescript — Generics while using React.forwardRef
  23. Difference between import React and import { Component } syntax [duplicate]
  24. When exactly is `componentDidMount` fired?
  25. Loading Screen on Next.js page transition
  26. create-react-app: how to use https instead of http?
  27. Disable ESLint that create-react-app provides
  28. Webpack & Typescript image import
  29. How to create dynamic refs in functional component- Using useRef Hook
  30. How to listen to localstorage value changes in react?

Leave a Comment