React component doesn't get new props when variable changes

Grafana Plugin Development
1

I’m developing a plugin for Garafana, that listens to a variable that is set from the dashboard.
I am able to access it via: props.data.request.scopedVars
My issue is, that when variable changes I don’t get the new value of the variable (I get it only after refresh).
How do I access the new chosen value from the variable dropdown?

2

Hello @ilibilibom ,

I have had a similar issue and componentDidUpdate() solved it. Used to store props.data in constructor and then React called componentDidUpdate method when my component’s parent panel was updated.

constructor(props: any) {
    super(props);
    this.data = props.data;
}

componentDidUpdate(prevProps) {
    this.data = this.props.data;
}
3

Thanks @vsergeyev
I’m using functional components, and I used this:

  useEffect(() => {
    console.log('props',props);
  },[props])

but it doesn’t work, the useEffect doesn’t get triggered when variable is changed.
Any idea why ?

4

ok I think I figured out the issue, the request that is sent after variable change is returning a "pending’ response. That’s why it’s not re rendering the component.

5

@ilibilibom cool you figured it out :slight_smile:

6

Thanks @vsergeyev :slight_smile:
I have another question,
Is there a way to display a variable dropdown within the panel I’m developing instead of on the top of the dashboard ?