Fails with dynamic components?

[paul-vd]

      <ReactPageScroller
        ref={(c) => (pageScrollerRef.current = c)}
        pageOnChange={handlePageChange}
        containerWidth={window.innerWidth * 0.4}
        containerHeight={window.innerHeight * 0.5}
        customPageNumber={currentPage}
      >
        <div key={'org-sec'} className="component">
          <input name="organizationIdValue" placeholder={'test 1'} />
        </div>
        <div key={'id-sec'} className="component">
          <input name="personalIdentificationNr" placeholder={'test 2'} />
        </div>
        {data.map(({ text, id }: any, i) => (
          <div key={id} className="component">
            <h1>section - {i}</h1>
            <input name={`input-${i}`} placeholder={`input ${i}`} />
          </div>
        ))}
      </ReactPageScroller>

[VikLiegostaiev]

Hi, @PaulPCIO , sorry didn't have enought time to get to the repo. Will check, thanks for rising! However, AFAIK, it should render dynamic components

[jsbisht]

I faced the same issue. I have made the fix for it. How do i raise a pull request?

   while (i < componentsToRenderLength && !isNil(children[i])) {
      containers[i] = true;
      if (Array.isArray(children[i])) {
        for (const index in children[i]) {
          const baby = children[i][index];
          newComponentsToRender.push(
            <div key={`${i}${index}`} style={{ height: '100%', width: '100%' }}>
              {React.cloneElement(baby, { ...baby.props })}
            </div>
          );
        }
      } else {
        newComponentsToRender.push(
          <div key={i} style={{ height: '100%', width: '100%' }}>
            {React.cloneElement(children[i], { ...children[i].props })}
          </div>
        );
      }
      i++;
    }

[VikLiegostaiev]

Hi all. For those who experienced the issue - try to update to version 2.1.0. Many thanks to @LeoneBacciu for a fix.