title: React prevent from toggle multiple modals
body: <p>I have problem with my react app. I have generated list of 100 items. I display every element from list using map function</p>
  
  <pre><code>&lt;ul className="list"&gt;
      {this.props.items.map((item) =&gt; {
        return (
          &lt;ItemView
            key={item.id}
            id={item.id}
            name={item.name}
            strenght={item.strenght}
            age={item.age}
          /&gt;
        );
      })}
  &lt;/ul&gt;
  </code></pre>
  
  <p>My item view display name, age and strenght. On mouseEnter display button which after click display modal under clicked element.</p>
  
  <pre><code>class ItemView extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        isMouseInside: false,
        isModalOpen: false,
      };
    }
  
    mouseEnter = () =&gt; {
      this.setState({ isMouseInside: true });
    };
  
    mouseExit = () =&gt; {
      this.setState({ isMouseInside: false });
    };
  
    showModal = () =&gt; {
      this.setState({ isModalOpen: !this.state.isModalOpen });
    };
  
    closeModal = () =&gt; {
      this.setState({ isModalOpen: false });
    };
  
    render() {
      return (
        &lt;li
          onMouseEnter={this.mouseEnter}
          onMouseMove={this.mouseEnter}
          onMouseLeave={this.mouseExit}
        &gt;
          &lt;div className="item__row"&gt;
             &lt;h5&gt;{this.props.name}&lt;/h5&gt;
             &lt;h6&gt;Age: {this.props.age}&lt;/h6&gt;
             &lt;p&gt;{this.props.strenght}/100&lt;/p&gt;
  
            {this.state.isMouseInside ? (
              &lt;button className="btn" onClick={() =&gt; this.showForm(false)}&gt;
                Change data
              &lt;/button&gt;
            ) : null}
  
          &lt;/div&gt;
          {this.state.isModalOpen ? (
            &lt;Modal
              onSubmit={this.handleSubmitForm}
            /&gt;
          ) : null}
        &lt;/li&gt;
      );
    }
  }
  </code></pre>
  
  <p>What I want to do is to prevent from blocking the possibility of opening two modals or even better if after click on another button in another itemView, opened modal will be closed and suitable will open.</p>
  
  <p>What happened now is I can open multiple modals and everythink works, but I want to make one modal will be displayed on page.</p>
  
  <p>I tried to make another function closeModal which set state of isModalOpen to false before this.setState({ isModalOpen: !this.state.isModalOpen }) in showModal function but it doesn't work.</p>
  
  <p>In this app I use redux and if redux can help solve the problem I can use it. </p>
  
  <p><a href="https://i.stack.imgur.com/QqziS.png" rel="nofollow noreferrer">Visualization what i want to do</a></p>
  
  <p>CODEPEN EXAMPLE: <a href="https://codepen.io/dominik3246/pen/QqKzzp" rel="nofollow noreferrer">https://codepen.io/dominik3246/pen/QqKzzp</a></p>