title: onClick event returning Every Modal instead of a Single Modal
body: <p>I'm trying to build a Jeopardy like game using React and Redux. I currently have an onClick event set to each <code>li</code>, but whenever I click on it, I get every Modal to pop up instead of the one that is attached to that <code>li</code> item. I have my code separated in different files but I believe these two files are the only ones I need to show: </p>
  
  <pre><code>const ModalView = React.createClass({
  
    pass: function(){
      console.log('pass clicked');
      store.dispatch({type:"MODAL_TOGGLE"})
    },
    submit: function(){
      console.log('submit clicked');
      store.dispatch({type:"MODAL_TOGGLE"})
  
    },
  
    render: function(){
      let question = this.props.question
      let category = this.props.category
      let answer = this.props.answer
      let val = this.props.value
  
      return (
        &lt;div&gt;
          &lt;div className="modal"&gt;
            &lt;p&gt;{category}&lt;/p&gt;
            &lt;p&gt;{question}&lt;/p&gt;
            &lt;p&gt;{answer}&lt;/p&gt;
            &lt;p&gt;{val}&lt;/p&gt;
  
            &lt;input
            type="text"
            placeholder="type in your answer"&gt;
            &lt;/input&gt;
            &lt;button onClick={this.submit}&gt;Submit&lt;/button&gt;
            &lt;button onClick={this.pass}&gt;Pass&lt;/button&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
      )
    }
  
  })
  </code></pre>
  
  <p>and ValuesView</p>
  
  <pre><code>const ValuesView = React.createClass({
    modalPopUp: function(value){
      store.dispatch({type:"MODAL_TOGGLE"})
    },
    render: function(){
      let showClass = "show-content"
      let hideClass = "hide-content"
      if (this.props.modal){
        showClass = "hide-content"
        hideClass = "show-content"
      }
      return (&lt;div&gt;
        &lt;ul className="list"&gt;
          {this.props.datum.clues.slice(0,5).map((data, i) =&gt; {
            if (data.value === null){
              return &lt;div&gt;
                      &lt;div className={hideClass}&gt;
                        &lt;ModalView
                        category = {this.props.category}
                        question = {data.question}
                        answer = {data.answer}
                        value ={data.value} /&gt;
                      &lt;/div&gt;
                      &lt;li onClick={this.modalPopUp} key={i}&gt;$600&lt;/li&gt;
                    &lt;/div&gt;
            }
            return   &lt;div&gt;
                      &lt;div className={hideClass}&gt;
                        &lt;ModalView
                        category = {this.props.category}
                        question = {data.question}
                        answer = {data.answer}
                        value ={data.value}/&gt;
                      &lt;/div&gt;
                      &lt;li
                      category = {this.props.category}
                      onClick={this.modalPopUp} key={i}&gt;${data.value}&lt;/li&gt;
                    &lt;/div&gt;
          })}
        &lt;/ul&gt;
          &lt;/div&gt;
      )
    }
  })
  </code></pre>
  
  <p>How would I go about only getting the corresponding Modal to display instead of every one? Thanks!!</p>