I'm not sure if this is possible, maybe I'm doing something wrong.

What I have is a loop that pushes some progress bar elements into the array and then have it rendered with the information.

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.

Instead of outputting it on the console, I want that information to pop up in the <Modal> dynamically.

So if user clicks on Progress bar number 1, the information that was passed in progress bar number 1 will show up in the <Modal>.

If I put the open function in <Modal> I get an error saying: "Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state."

A photo of the output Here's my 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(
       <td id="tableBody">
          <div className="progress" role="progressbar" id="progressBarStyle"
            onClick={this.open.bind(null, "System2", systemValues[0], name[0], individualSysValueOutput[0])}>
            <div className="progress-meter" data-values={this.calculatePercent(systemValues[0])}>
                {(Math.round(this.calculatePercent(systemValues[0]) * 100) / 100) + '%'}
            </div>
          </div>
       </td>
    )
}


return(
  <div>
      <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                {/* <td>{this.open()}</td> */}
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>


     <div className="dataTable" >
       <table className="hover">
         <tbody>
           <tr>
             {/* Progress bar will be rendered here */}
             {bodyRows[0]}
           </tr>
           <tr>
           </tr>
         </tbody>
       </table>
     </div>
  </div>
)
});
module.exports = TableResults;

I'm not sure if this is possible, maybe I'm doing something wrong.

What I have is a loop that pushes some progress bar elements into the array and then have it rendered with the information.

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.

Instead of outputting it on the console, I want that information to pop up in the <Modal> dynamically.

So if user clicks on Progress bar number 1, the information that was passed in progress bar number 1 will show up in the <Modal>.

If I put the open function in <Modal> I get an error saying: "Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state."

A photo of the output Here's my 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(
       <td id="tableBody">
          <div className="progress" role="progressbar" id="progressBarStyle"
            onClick={this.open.bind(null, "System2", systemValues[0], name[0], individualSysValueOutput[0])}>
            <div className="progress-meter" data-values={this.calculatePercent(systemValues[0])}>
                {(Math.round(this.calculatePercent(systemValues[0]) * 100) / 100) + '%'}
            </div>
          </div>
       </td>
    )
}


return(
  <div>
      <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                {/* <td>{this.open()}</td> */}
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>


     <div className="dataTable" >
       <table className="hover">
         <tbody>
           <tr>
             {/* Progress bar will be rendered here */}
             {bodyRows[0]}
           </tr>
           <tr>
           </tr>
         </tbody>
       </table>
     </div>
  </div>
)
});
module.exports = TableResults;

• javascript
• html
• reactjs
• zurb-foundation

1 Answer 1

Firstly you should bind ponent context to open method when using it as event handler (use this insetad of null as first bind argument):

onClick={this.open.bind(this, "System2", systemValues[0], name[0], individualSysValueOutput[0])}

Then you should store data corresponding to clicked progress in state:

open: function(system, value, name, individualValues){
    this.setState({ showModal: true,
          system,
          value,
          name,
          individualValues
     });
}

and now you can use state data in modal like this:

 <Modal
        aria-labelledby='modal-label'
        style={modalStyle}
        backdropStyle={backdropStyle}
        show={this.state.showModal}
        onHide={this.close}
        keyboard={true}
      >
        <div style={dialogStyle()}>
          <table>
            <thead>
              <tr>
                <th>Head</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>BodyRow</td>
              </tr>
              <tr>
                <td>{this.state.value}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </Modal>