How to create an element not just place it on the page

Question

I need to create an instance of the element Grid so that I can call functions on it in the code? For example, if theGrid is of type Grid, I want to both place it on the page, but I also want to save it as a local variable so I can later say: theGrid.forceUpdate().

The code below doesn't display a Grid. But if I replace with <Grid...> where theGrid is (with parameters of course), it does show on the page, but I no longer can reference it in my code.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';
import ReactInterval from 'react-interval';

// Grid data as an array of arrays
const quoteList = [
  ['GE', 100, 35.28, 35.30, 100, 95125],
  ['IBM', 100, 135.11, 135.20, 100, 195125],
  ['C', 100, 45.23, 45.30, 100, 195125]
];

const App = React.createClass({
  getInitialState() {
    return {
      enabled: false,
      timeout: 1000,
      count: 0
    };
  },

  cellRenderer ({ columnIndex, key, rowIndex, style }) {
    return (
      <div
        key={key}
        style={style}
      >
        {quoteList[rowIndex][columnIndex]}
      </div>
    )  
  },

  render() {
    const {timeout, enabled, count} = this.state;
    var theGrid = React.createElement(Grid, {
          cellRenderer:this.cellRenderer,
          columnCount:quoteList[0].length,
          columnWidth:50,
          height:quoteList.length * 20,
          rowCount:quoteList.length,
          isVisible : true,
          rowHeight:20,
          width:800}, null);

    return (
      <div>
        <ReactInterval {...{timeout, enabled}}
          callback={
            () => {
              this.setState({count: this.state.count + 1})
              quoteList[0][1] = this.state.count
              console.log(quoteList[0][1])
            }
          } 
        />

        <input type="number" step="200" min="200" max="5000" value={this.state.timeout}
          onChange={({target: {value}}) => this.setState({timeout: parseInt(value, 10)})} />&nbsp;

        <button disabled={enabled} onClick={() => this.setState({enabled: true})}>
          Start</button>&nbsp;

        <button disabled={!enabled} onClick={() => this.setState({enabled: false})}>
          Stop</button>&nbsp;

        {count}

        <div>
          &nbsp;
        </div>

        <theGrid/>
      </div>
    );
  }
});

const appRoot = document.createElement('div');
document.body.appendChild(appRoot);
ReactDOM.render(<App />, appRoot);

"theGrid is of type Grid" -- what does that mean? Also, are you trying to work with it from within the app or from elsewhere? — jmargolisvt, Aug 10 '17 at 17:45
Grid has functions that can be called, for example, forceUpdate. How do you suggest that say there is a button on the screen that when clicked, I want to call Grid.forceUpdate() from the callback function of the button's click method? — Ivan, Aug 10 '17 at 17:49
I suspect I have to call React.CreateElement(Grid) or something like that, then place it on the code the way I do Grid. — Ivan, Aug 10 '17 at 17:52
Probably not that. It depends on the structure of your app and whether or not you are using Redux. Publish the call site for Grid. — jmargolisvt, Aug 10 '17 at 18:09
I put the whole code in the post. I thought this is an elementary question but I guess not. — Ivan, Aug 10 '17 at 18:18

score 2 · Accepted Answer · answered Aug 10 '17 at 19:12

2

Did you try using refs?

Add this prop to your Grid:

ref={(ref) => this.theGrid = ref}

Now you should be able to reference the grid via this.theGrid.

The author of react-virtual addressing a similar issue:

https://github.com/bvaughn/react-virtualized/issues/383

How to create an element not just place it on the page

1 Answers1