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?
Kumar,
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?
