I'm using 'react-virtualized' to render an infinite scrolling list.
However, I am having trouble rendering the rowHeight
dynamically. I made an attempt, but it only is relevent for desktop, and feels wrong.
I tried following the examples, but had no success.
What is the correct way to calculate the true row height?
It should be responsive to mobile.
Here is an example:
https://codesandbox.io/s/ADARgvlxB
class App extends React.Component {
render() {
return (
<div>
<AutoSizer>
{({ height, width }) => (
<List
height={600}
width={width}
rowCount={foo.length}
rowHeight={({ index }) => {
const x = foo[index];
if (x.name.length < 10) { return 20; }
else if (x.name.length > 9) { return 40;}
}}
rowRenderer={({ index, style }) => {
const x = foo[index];
return (
<div key={index} style={style}>
{x.name}
</div>
);
}}
/>
)}
</AutoSizer>
</div>
);
}
}