Lista de mostrar con límite y mostrar más de botón

Hayk Shakhbazyan:

Estoy intentando crear una lista de elementos, donde siempre hay 3 mostrados por fila y cuando hago clic en el botón Mostrar más otros 3 será mostrado. Por desgracia estoy teniendo problemas para hacerlo en el mapa y la rebanada como el uso de este enfoque siempre rendir 3 de los mismos artículos en una fila y no tiene en cuenta si el número de elementos no es divisible por 3. Las sugerencias son bienvenidas

Aquí es lo que tengo hasta el momento (el Math.random como clave es sólo un sustituto)

  const renderRow = (
    documentData: {
      fileName: string;
      description: string;
      contentUrl: string;
    }[],
  ) => {
    return documentData.slice(0, limit).map((documentsRow, i) => {
      return (
        <Grid key={Math.random()} container spacing={1}>
          <Grid container item xs={12} spacing={3}>
            {renderRowItem(documentsRow)}
            {renderRowItem(documentsRow)}
            {renderRowItem(documentsRow)}
          </Grid>
        </Grid>
      );
    });
  };

Este es un ejemplo de trabajo - https://codesandbox.io/s/react-hooks-typescript-list-with-load-more-button-fvbue

Hayk Shakhbazyan:

Encontrado una solución que era tan fácil como la actualización del sistema de rejilla de material-ui. Compruebe https://codesandbox.io/s/react-hooks-typescript-list-with-load-more-button-fvbue de respuesta