Pluggable Widget props change re-render

0
Hi, I wrote a pluggable widget that accepts an attribute as string from the data view. I have a toggle button on the toggle e.g live & historical on the toggle, I call microflow → to get data → to add data object to my View PageContext helper NP entity & refresh the root object (View) my widget accepts props first time on the toggle , but after 2nd time switching it will not re-render. e.g:-  default selected  LIVE → now Change to Historical:-  it works fine. but after the switch back to LIVE from Historical → get new data & refresh in the client.  i get correct data but my widget not accept the props change.          
asked
1 answers
1

 Your component must listen to changes of the prop (attribute) this can be done by using the state in your widget, and then use the componentDidUpdate lifecycle hook.

Here is an example of how you can make your widget listen to changes of a property. The moment you refresh your object in a microflow the component will check if the props(attributes) are changed, and then rerender if required.

class MyClass extends Component{
  constructor(props){
    super(props);
    this.state = { object: undefined } // declare the initial state of the object or attribute
  }

  // every time a prop has changed this function gets called
  // like this the state will change whenever the object value changes

  componentDidUpdate(prevProps){
  
  // use bellow to check if one ore more props have changed.

    if(prevprops !== this.props){
	
	  // check if it is this prop that has changed
	
      if(prevprops.attribute !== this.props.attribute){
	  
	    // set the new value in the state
	  
	    this.setState({object: this.props.attribute)}
	  }
	
      
    }
  }

  // the render function uses the value from the state to get it's data
  // so the moment the object in the state changes, a rerender will happen with the new value of the object

  render(){
    const {object} = this.state;
    return(
      <div>{object}</div>
    )
  }
}

 

answered