Stop propagation in React onclick handler - reactjs

Question

I have a problem with propagation in react.
I hace this method that render div-tags with p-tags within:
private renderTags(tag: Tags, index: number) {
return <div>
<div onClick={(e) => { e.stopPropagation(); this.collectTags(tag); }}>
<p className={styles.tag}># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></p>
</div>
</div>
}
that method is called from the render like this:
<div className={styles.tagsContainer}>
{this.state.items.slice(0, 12).map((w, index) => this.renderTags(w, index))}
</div>
As you see the renderTags method calls for each items in the array.
the idea with the first method is that when a user click on one of the elements that element is sent to an array, the problem is that when I click in one of these elements all the elements sends to the array. I tested by adding a class name to the clicked element just for checking reason, and i can see that the same behavior arises, when I click in one of the elements all the elements get the class name.
how can I stop this propagation?. by the way this is the method that hear for the click and put the clicked element in the array:
private collectTags(newTag: Tags): any {
//this.setState({ savingSettings: true, tagActive: true });
let selectedTags: Tags[] = this.state.selectedTags;
selectedTags.push(newTag);
this.setState({
selectedTags: selectedTags,
hideSaveButton: false
});
return selectedTags;
}
UPDATE
Better I post the entire code:
import * as React from 'react';
import { CacheManager } from "../../common/CacheManager";
import { ITagsDataProvider } from "../../interfaces/ITagsDataProvider";
import Tags from "./Tags";
import styles from './TagsContainer.module.scss';
import { Dialog, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
export interface ITagsContainerProps {
provider: ITagsDataProvider;
}
export interface ITagsContainerState {
items: Tags[];
allTags: Tags[];
selectedTags: Tags[];
savingSettings: boolean;
currentTagsIndex: number;
activeTile: number;
hideDialog: boolean;
hideSaveButton: boolean;
}
export default class TagsContainer extends React.Component<ITagsContainerProps, ITagsContainerState> {
private readonly cacheKey = "TagsLinks";
constructor(props: ITagsContainerProps) {
super(props);
this.state = {
items: [],
allTags: [],
selectedTags: [],
savingSettings: false,
currentTagsIndex: -1,
activeTile: -1,
hideDialog: true,
hideSaveButton: true
}
}
public componentDidMount(): void {
var cacheManager = new CacheManager();
var cachedValue = cacheManager.get(this.cacheKey);
//If there are cached values update the state
if (cachedValue) {
this.setState({
items: cachedValue,
allTags: [],
savingSettings: false,
currentTagsIndex: -1
});
return;
}
this.props.provider.getAllTags().then((tags) => {
if (tags != null) {
cacheManager.set(this.cacheKey, tags);
}
this.setState({
items: tags,
allTags: [],
});
});
}
private renderTags(tag: Tags, index: number) {
return <div>
<div onClick={(e) => this.onTagClick(tag, e)}>
<p className={styles.tag}># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></p>
</div>
</div>
}
private onTagClick(tag: Tags, e: React.MouseEvent<HTMLDivElement>) {
e.stopPropagation();
this.collectTags(tag);
}
private collectTags(newTag: Tags): any {
this.setState({
selectedTags: {
...this.state.selectedTags,
newTag
},
hideSaveButton: false
});
}
private saveSettings(): void {
let sTags = this.state.selectedTags;
this.setState({
items: sTags
});
console.log('SELECTED TAG ' + this.state.items);
var cacheManager = new CacheManager();
cacheManager.set(this.cacheKey, sTags);
this.props.provider.saveSettingsData(sTags).then(() => {
this.setState({
savingSettings: false
});
});
}
// Render the tags in the dialog box
private onRenderDialog = (tag: Tags, index: number): JSX.Element => {
return (
<div className={styles.tag} onClick={(e) => { e.stopPropagation(); this.collectTags(tag); }}>
<span># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></span>
</div>
)
}
public render(): JSX.Element {
return <div className={styles.tagCloud}>
<div>
<h1>What are you interested in?</h1>
<p>We'll show you more stories from the topics you pick below</p>
</div>
<div>
<div className={styles.tagsContainer}>
{this.state.items.slice(0, 12).map((t, index) => this.renderTags(t, index))}
</div>
<div>
<a className={styles.allItemsLink} href="#" onClick={this._showDialog}>View all topcis</a>
</div>
<div>
{ this.state.hideSaveButton === false ? <DefaultButton
text="Done"
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={(e) =>{e.stopPropagation(); this.saveSettings()}}
/> : null}
</div>
</div>
<Dialog
hidden={this.state.hideDialog}
onDismiss={this._closeDialog}
containerClassName={'ms-dialogMainOverride ' + styles.textDialog}
modalProps={{
isBlocking: true,
}}>
<div className={styles.tagsDialogContainer}>
{this.state.allTags.map((t, index) => this.onRenderDialog(t, index))}
</div>
<DialogFooter>
<DefaultButton
style={{ backgroundColor: '#ff0033', color: '#ffffff' }}
onClick={this._closeDialog}
text="Done"
/>
</DialogFooter>
</Dialog>
</div>
}
private _showDialog = (): void => {
this.setState({ hideDialog: false });
this.props.provider.getAllTags().then((items) => {
this.setState({ allTags: items });
})
};
private _closeDialog = (): void => {
this.setState({ hideDialog: true });
}
}
Best regards
Americo

Answer 1

First of all you need to create separate method for event handling, for example onTagClick.
private renderTags(tag: Tags, index: number) {
return <div>
<div onClick={e => this.onTagClick(e, tag)}>
<p className={styles.tag}># {tag.title}
<i className="ms-Icon ms-Icon--CirclePlus"></i>
</p>
</div>
</div>
}
private onTagClick(tag: Tags, e: React.MouseEvent<HTMLElement>) {
e.stopPropagation();
this.collectTags(tag);
}
Another issue - you are mutating state directly, which not allowed in React.
// Here you creating the link to array named `selectedTags`.
let selectedTags: Tags[] = this.state.selectedTags;
// and here you mutating your state directly
selectedTags.push(newTag);
Just copy your array before adding new item or use spread operator.
private collectTags(newTag: Tags): any {
this.setState({
selectedTags: {
...this.state.selectedTags,
newTag
},
hideSaveButton: false
});
}
Also, don't forget to bind context to collectTags method in constructor.
constructor(props) {
super(props);
...some code if you have...
this.collectTags = this.collectTags.bind(this);
}
Hope it helped.