I have created a SPFX webpart, so when I add this webpart multiple time on the same page then same data appears on both webparts even if they have different property pane configuration. The property pane configuration for one webpart change both webparts as they have same class for div and other controls..

How do we handle this situation in SPFX?

  • Are you using classes of div elements to change the values in property pane configuration? Can you add more details to your question? maybe any screenshot or something to clarify your question. Nov 14, 2019 at 8:18
  • HTML controls have classes, based on that I am binding data to it
    – KumarV
    Nov 14, 2019 at 8:44

1 Answer 1



This kind of behaviour can happen if you use DOM manipulation in your web part (e.g.: find an element by CSS class or I'd and change its attributes) to display the data.

What happens is the last web part to load results overrides all elements in the page, including the ones from the other web parts, essentially overwriting every web part to display the same data.

If you use React, you can use your TSX component to render the data in place, without DOM manipulation. You can also store your results in your component's state and call this.setState to update your elements when you update the state. You can also use the React ref attribute to create a reference to an element and set it's value later.

If you must use DOM manipulation, consider using an approach that will make your elements unique. I like to use SCSS because it creates unique CSS classes that you can refer to when rendering, and letter when looking it up.

I hope this helps?

  • I have tried using the scss style, number is added to the class but it is still same in both the webparts
    – KumarV
    Nov 15, 2019 at 3:06
  • Kumar, would you be willing to share your web part component's code so that we can diagnose it? Nov 18, 2019 at 13:32

Not the answer you're looking for? Browse other questions tagged or ask your own question.