React Child Component Not Updating After Parent State Change

by

There are two issues with your code.

Your child component’s initial state is set from props.

this.state = {
  data: props.data
};

Quoting from this SO Answer:

Passing the intial state to a component as a prop is an anti-pattern
because the getInitialState (in our case the constuctor) method is only called the first time the
component renders. Never more. Meaning that, if you re-render that
component passing a different value as a prop, the component
will not react accordingly, because the component will keep the state
from the first time it was rendered. It’s very error prone.

So if you can’t avoid such a situation the ideal solution is to use the method componentWillReceiveProps to listen for new props.

Adding the below code to your child component will solve your problem with Child component re-rendering.

componentWillReceiveProps(nextProps) {
  this.setState({ data: nextProps.data });  
}

The second issue is with the fetch. 

_makeApiCall(endpoint) {
  fetch(endpoint)
    .then((response) => response.json())   // ----> you missed this part
    .then((response) => this.setState({ response }));
}

And here is a working fiddle: https://jsfiddle.net/o8b04mLy/

More Related Contents:

  1. Dynamically import images from a directory using webpack
  2. How to pass params with history.push/Link/Redirect in react-router v4?
  3. How to get history on react-router v4?
  4. How to pass params into link using React router v6?
  5. React Router v4 – How to get current route?
  6. Detect Route Change with react-router
  7. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  8. Warning: Each child in a list should have a unique “key” prop
  9. How to start search only when user stops typing?
  10. Is using async componentDidMount() good?
  11. How to use switch statement inside a React component?
  12. Typescript image import
  13. Call a React component method from outside
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. Set types on useState React Hook with TypeScript
  16. Typescript react – Could not find a declaration file for module ”react-materialize’. ‘path/to/module-name.js’ implicitly has an any type
  17. How to resolve the error on ‘react-native start’
  18. Recommended approach for route-based tests within routes of react-router
  19. NextJs CORS issue
  20. Class extends React.Component can’t use getInitialState in React
  21. react router v6 No routes matched location
  22. Question mark before dot in javascript / react [duplicate]
  23. React this.state is undefined?
  24. How do I type this ‘as’ JSX attribute in TypeScript?
  25. Create-React-App build – “Uncaught SyntaxError: Unexpected token
  26. React 16 warning “warning.js:36 Warning: Did not expect server HTML to contain a in .”
  27. How to bundle a React app to a subdirectory on a server?
  28. How to test Async Storage with Jest?
  29. Children won’t render when using a layout in ReactJS
  30. How do I window removeEventListener using React useEffect

Leave a Comment