Stop Propagation in React mapped elements?

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

It is because you need to set each items active State individually.

  this.setState({
      active: true     <--- make an array here
    });

Thanks, But I am afraid that I don’t follow you. I don’t have too much experience with react. Waht you mean with make an array in the setState?

With the code you’ve written, every item gets the same state, but you need one state for each div-element.

    this.setState({
      active: [0,1,0,1,1,0]
    });