Reactjs - How To Fetch Inside A Child Component With Details Passed On By Props From A Parent Component?

I have a component which has a form, and from that form you can select three options. Once either of these options is selected, a child component is rendered underneath. This child

Solution 1:

The componentDidMount runs when the component is mounted i.e. when it appears for the first time. Once you change the prop by selecting another value, it doesn't re-mount the component again, it just updates the prop and re-renders it.

If you want to fetch the data again when the detail prop changes you need to use componentDidUpdate along with componentDidMount

componentDidMount() {
  this.getData();
}

componentDidUpdate(prevProps) {
  if (this.props.detail !== prevProps.detail) { // This prevents the update from going into an infinite loopthis.getData();
  }
}