InsideDarkWeb.com

How to update the value of a prop upon a state change in React

I have a parent React component (MainComponent) that renders a child component (theKeyComponent) and passes a constant as a prop (myID). The parent component also tracks the state ‘activeLink’.

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }
  render(){
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return(){
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   }
  }
}

Here’s a bit from inside the KeyComponent

export default class HelpScoutBeacon extends React.Component {
  static propTypes = {
    myID: PropTypes.string.isRequired
  }
  componentDidMount() {
    myAPImethod('init', this.props.myID);
  } 
  render(){return(){}}
}

I want to change the value of the constant myID depending on the value of ‘activeLink’. This is not a problem when both components are mounted for the first time. However, when the value of ‘activeLink’ changes ‘myID’ doesn’t change since the child component is already mounted.

I’m struggling to see what would be the ‘React way’ of doing this. Should ‘myID’ be set as another state and the function that sets the state for activeLink should include another one to set the state of myID? Or is this overcomplicating things and there’s an easier way to re-render only that particular child component so that it considers the new value of myID.

I’m new to React so I was hoping I could get some clarification form SO community.

Stack Overflow Asked by alopez02 on November 18, 2021

2 Answers

2 Answers

This is not a problem when both components are mounted for the first time. However, when the value of 'activeLink' changes 'myID' doesn't change since the child component is already mounted.

The issue is with regards to how you handle the trigger of the API call. componentDidMount will only trigger when the component was initially mounted. This will not be triggered if a state is updated. You are going to want to use componentDidUpdate React Lifecycle as well in augmentation to componentDidMount. componentDidUpdate will trigger when your activeLink state changes because you pass it as props to theKeyComponent

componentDidUpdate() {
    myAPImethod('init', this.props.myID);
} 

Reference: https://reactjs.org/docs/react-component.html#componentdidupdate

Answered by 95faf8e76605e973 on November 18, 2021

import theKeyComponent from "../components/theKeyComponent.jsx";

export default class MainComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     activeLink: '#section1'
    }
  }

 static getDerivedStateFromProps(props, state) {
    if (props.activeLink !== state.activeLink ) {
      // updating the state here if there are any changes in props.
      return {
        activeLink: props.activeLink,
      };
    }

    // Return null if the props hasn't changed
    return null;
    }

use getDerivedStateFromProps hook to find out changes of props. you need to update the changes of props in state.

 render(){
  // now, here your state is updated. 
   const myId = this.state.activeLink === '#section1' ? '0001' : '0002';
   return (
     <theKeyComponent myID={myID} />
     <otherComponent otherPropsHere={otherProps} />
   )
  }

Any suggestions are welcome.

Answered by Azizul Hoq on November 18, 2021

Add your own answers!

Related Questions

Function composition using Go syntax

1  Asked on July 28, 2020 by overexchange

     

Replacement to getch based code block in cpp

1  Asked on July 24, 2020 by sonu-ishaq

         

Combining if let statements in Rust

1  Asked on July 24, 2020 by deniz-basgoren

 

Ask a Question

Get help from others!

© 2021 InsideDarkWeb.com. All rights reserved.