How to set up dynamic row height in react-virtualized List?
<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>