title: ReactJS Passing data to a rendered modal?
body: <p>I'm not sure if this is possible, maybe I'm doing something wrong.</p>
  
  <p>What I have is a loop that pushes some progress bar elements into the array and then have it rendered with the information.</p>
  
  <p>Clicking on different progress bar will output the data that was pass on to that specific progress bar, but this is displayed on the console.</p>
  
  <p>Instead of outputting it on the console, I want that information to pop up in the <code>&lt;Modal&gt;</code> dynamically. </p>
  
  <p>So if user clicks on Progress bar number 1, the information that was passed in progress bar number 1 will show up in the <code>&lt;Modal&gt;</code>.</p>
  
  <p>If I put the <code>open</code> function in <code>&lt;Modal&gt;</code> I get an error saying:
  "Cannot update during an existing state transition (such as within <code>render</code>). Render methods should be a pure function of props and state."</p>
  
  <p>A photo of the output
  <a href="https://i.stack.imgur.com/lmFcg.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lmFcg.jpg" alt="enter image description here"></a>
  Here's my code:</p>
  
  <pre><code>var React = require('react');
  var Modal = require('react-overlays/lib/Modal');
  
  var TableResults = React.createClass({
  
  close(){
      this.setState({ showModal: false });
  },
  open: function(system, value, name, individualValues){
      this.setState({ showModal: true });
      console.log(system);
      console.log("Story: " + name);
      console.log("Value:" + individualValues);
      console.log("Total Output: " + value);
      console.log("=============================================");
  },    
  
  
  render: function(){
  loop with logic and calculations{
  
      bodyRows[cellIndex].push(
         &lt;td id="tableBody"&gt;
            &lt;div className="progress" role="progressbar" id="progressBarStyle"
              onClick={this.open.bind(null, "System2", systemValues[0], name[0], individualSysValueOutput[0])}&gt;
              &lt;div className="progress-meter" data-values={this.calculatePercent(systemValues[0])}&gt;
                  {(Math.round(this.calculatePercent(systemValues[0]) * 100) / 100) + '%'}
              &lt;/div&gt;
            &lt;/div&gt;
         &lt;/td&gt;
      )
  }
  
  
  return(
    &lt;div&gt;
        &lt;Modal
          aria-labelledby='modal-label'
          style={modalStyle}
          backdropStyle={backdropStyle}
          show={this.state.showModal}
          onHide={this.close}
          keyboard={true}
        &gt;
          &lt;div style={dialogStyle()}&gt;
            &lt;table&gt;
              &lt;thead&gt;
                &lt;tr&gt;
                  &lt;th&gt;Head&lt;/th&gt;
                &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr&gt;
                  &lt;td&gt;BodyRow&lt;/td&gt;
                &lt;/tr&gt;
                &lt;tr&gt;
                  {/* &lt;td&gt;{this.open()}&lt;/td&gt; */}
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/Modal&gt;
  
  
       &lt;div className="dataTable" &gt;
         &lt;table className="hover"&gt;
           &lt;tbody&gt;
             &lt;tr&gt;
               {/* Progress bar will be rendered here */}
               {bodyRows[0]}
             &lt;/tr&gt;
             &lt;tr&gt;
             &lt;/tr&gt;
           &lt;/tbody&gt;
         &lt;/table&gt;
       &lt;/div&gt;
    &lt;/div&gt;
  )
  });
  module.exports = TableResults;
  </code></pre>