0

I have an Infinite Loader List component which renders array of data. I needed to aggregate my data (grouped by days), so I made two levels array:

list = {
  [ 
    {
      group:'09-20',
      data: [
        content: 'content',
        contentInfo: 'contentInfo'
      ]
    },

    {
      group:'09-21',
      data: [
        content: 'content',
        contentInfo: 'contentInfo'
      ]
    },
  ]
    // and so on...
}

Is there a way to render this? I tried to map the second array (called data here) in renderRow function, but the result is buggy scrolling (data flickers because of rendering, and loadMoreRows func is not triggered)

renderRow:

  renderRow = ({ index, key, style }) => {
    let content;
    if (!this.state.results[index]) content = <ActivityLogRowLoading />;
    else {
      const data = this.state.results[index].data.map(element => (
        <Element>
          <Content>{element.description}</Content>
          <Date>
            {moment(element.created).format('YYYY-MM-DD HH:mm:ss')}
          </Date>
        </Element>
      ));
      content = (
        <div>
          {this.state.results[index].group} 
          {data}
        </div>
      );
    }
    return (
      <div key={key} style={style}>
        {content}
      </div>
    );
  };
papryk
  • 442
  • 4
  • 14
  • `renderRow` code ? – xadm Sep 27 '18 at 16:30
  • Hi @xadm, I updated my post with `renderRow` function. – papryk Sep 28 '18 at 07:30
  • No problems w/o mapping? Mapped `` (its top div) needs keys, too. Convert renderRow, pass row data to full (pure) component - give it responsibility to show/hide inner entries - accordion style? create [mcve] at stackblitz? – xadm Sep 28 '18 at 10:12
  • @xadm Sorry for late answer, I will try to create minimal working example. I discovered, that the problem is with row height - which should be generated dynamically. So I followed documentation and created some functions to return height of single row based on its size. The problem still appeared. – papryk Oct 02 '18 at 13:31

0 Answers0