title: How to set up dynamic row height in react-virtualized List?
body: <p>I have gone through many answers on StackOverflow. I have also gone through List document here, <a href="https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md" rel="noreferrer">react-virtualized/List</a>. But, still I am not able to understand how to dynamically set row height in <strong>react-virtualized</strong> List. How to calculate the height in <code>rowHeight</code> prop function?</p>
  
  <p>I can call my function like <code>rowHeight={({ index }) =&gt; this.computeRowHeight({ index })}</code>. But how will the function compute the row height?</p>
  
  <p>Following is the code for reference.</p>
  
  <pre><code>import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  import { AutoSizer, InfiniteLoader, List } from 'react-virtualized';
  import _ from 'lodash';
  
  class InfiniteList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list: props.list,
        loading: false
      };
    }
    componentDidMount() {
      fetch('http://jsonplaceholder.typicode.com/comments')
        .then((response) =&gt; {
          response.json().then((data) =&gt; {
            this.setState({
              list: _.concat(this.state.list, _.map(data, 'body')),
              loading: false
            });
          });
        });
    }
    isRowLoaded({ index }) {
      return !!this.state.list[index];
    }
  
    loadMoreRows({ startIndex, stopIndex }) {
      if (this.state.loading) {
        return;
      }
      this.setState({
        loading: true
      });
      return fetch('http://jsonplaceholder.typicode.com/comments')
        .then((response) =&gt; {
          response.json().then((data) =&gt; {
            // Simulate delay
            setTimeout(() =&gt; {
              this.setState({
                list: _.concat(this.state.list, _.map(data, 'body')),
                loading: false
              });
            }, 3000);
          });
        });
    }
  
    rowRenderer({ key, index, isScrolling, isVisible, style }) {
      if (isVisible) {
        return (
          &lt;div key={key}&gt;
            &lt;div style={style}&gt;#{this.state.list[index]}.&lt;/div&gt;
          &lt;/div&gt;
        );
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;InfiniteLoader
            isRowLoaded={({ index }) =&gt; this.isRowLoaded({ index })}
            loadMoreRows={({ startIndex, stopIndex }) =&gt; this.loadMoreRows({ startIndex, stopIndex })}
            rowCount={this.state.list.length}
          &gt;
            {({ onRowsRendered, registerChild }) =&gt; (
              &lt;AutoSizer disableHeight&gt;
                {({ width }) =&gt; (
                  &lt;List
                    onRowsRendered={onRowsRendered}
                    ref={registerChild}
                    width={width}
                    height={320}
                    rowCount={this.state.list.length}
                    rowHeight={40}
                    rowRenderer={({ key, index, isScrolling, isVisible, style }) =&gt; this.rowRenderer({ key, index, isScrolling, isVisible, style })}
                  /&gt;
                )}
              &lt;/AutoSizer&gt;
            )}
          &lt;/InfiniteLoader&gt;
          {this.state.loading &amp;&amp; &lt;p&gt;Loading...&lt;/p&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  const list = [];
  
  ReactDOM.render(
    &lt;InfiniteList list={list} /&gt;,
    document.querySelector('#root')
  );
  </code></pre>
  
  <blockquote>
    <p><strong>Update</strong></p>
  </blockquote>
  
  <p>Dynamic height is now working with the following code with <code>CellMeasurer</code>. But, unfortunately <code>this.loadMoreRows()</code> function is not called in <code>InfiniteLoader</code>. Without <code>CellMeasurer</code> also it is not working. I am not sure what I did wrong in the following code.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { AutoSizer, CellMeasurer, InfiniteLoader, List } from 'react-virtualized';
  import _ from 'lodash';
  
  class InfiniteList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list: props.list,
        loading: false
      };
    }
    componentDidMount() {
      fetch('http://jsonplaceholder.typicode.com/comments')
        .then((response) =&gt; {
          response.json().then((data) =&gt; {
            this.setState({
              list: _.concat(this.state.list, _.map(data, 'body')),
              loading: false
            });
          });
        });
    }
    isRowLoaded({ index }) {
      return !!this.state.list[index];
    }
  
    loadMoreRows({ startIndex, stopIndex }) {
      if (this.state.loading) {
        return;
      }
      this.setState({
        loading: true
      });
      return fetch('http://jsonplaceholder.typicode.com/comments')
        .then((response) =&gt; {
          response.json().then((data) =&gt; {
            // Simulate delay
            setTimeout(() =&gt; {
              this.setState({
                list: _.concat(this.state.list, _.map(data, 'body')),
                loading: false
              });
            }, 3000);
          });
        });
    }
  
    rowRenderer({ key, index, isScrolling, isVisible, style }) {
      if (isVisible) {
        return (
          &lt;div key={key} style={style}&gt;#{index} {this.state.list[index]}.&lt;/div&gt;
        );
      }
    }
    cellRenderer({ columnIndex, key, rowIndex, style }) {
      return (
        &lt;div
          key={key}
          style={style}
        &gt;
          &lt;div&gt;#{rowIndex} {this.state.list[rowIndex]}.&lt;/div&gt;
        &lt;/div&gt;
      );
    }
    render() {
      return (
        &lt;div&gt;
          &lt;InfiniteLoader
            isRowLoaded={isRowLoaded =&gt; this.isRowLoaded(isRowLoaded)}
            loadMoreRows={loadMoreRows =&gt; this.loadMoreRows(loadMoreRows)}
            rowCount={this.state.list.length}
          &gt;
            {({ onRowsRendered, registerChild }) =&gt; (
              &lt;AutoSizer disableHeight&gt;
                {({ width }) =&gt; (
                  &lt;CellMeasurer
                    cellRenderer={cellRenderer =&gt; this.cellRenderer(cellRenderer)}
                    columnCount={1}
                    rowCount={this.state.list.length}
                  &gt;
                    {({ getRowHeight }) =&gt; (
                      &lt;List
                        onRowsRendered={onRowsRendered}
                        ref={registerChild}
                        width={width}
                        height={400}
                        rowCount={this.state.list.length}
                        rowHeight={getRowHeight}
                        rowRenderer={rowRenderer =&gt; this.rowRenderer(rowRenderer)}
                      /&gt;
                    )}
                  &lt;/CellMeasurer&gt;
                )}
              &lt;/AutoSizer&gt;
            )}
          &lt;/InfiniteLoader&gt;
          {this.state.loading &amp;&amp; &lt;p&gt;Loading...&lt;/p&gt;}
        &lt;/div&gt;
      );
    }
  }
  
  const list = [];
  
  ReactDOM.render(
    &lt;InfiniteList list={list} /&gt;,
    document.querySelector('#root')
  );
  </code></pre>
  
  <p>Any help will be appreciated. Thanks!</p>