Sign in
Log inSign up

Stop Propagation in React mapped elements?

Americo's photo
Americo
·Feb 17, 2019

Hi, I am testing the map method in a simple React application and I am stuck with a propagation problem. The code is very simple: I have a render method: 

<div className={styles.tagContainer}>
                { this.state.items.map((item, key) => {
                  return (
                    <div key={key} onClick={(e) => {this.onClickTag(e, item); return false;}}>
                            <p  className={`${this.state.active !== true ? styles.tagNormalState : styles.tagSelectedState}`}>{item.Title}</p>
                    </div>
                  );
                })}
              </div>

This method is rendering a serie of div elements with styled p-elements. The div element has an onClick event that when clicked it shoul call another method called onClickTag which is this: 

private onClickTag(e: React.MouseEvent<HTMLElement>,item): any {
    e.stopPropagation();
    this.setState({
      active: true
    });
  }

right now this method only shange the state to set another color to the div-element when is clicked. The problem is that is not just the clicked element that get the new color but all the items. I tryed to use the e.stopPropagation() to stop this but is not working. Do you any idea what the problem can be? Best regads Americo

2