title: How to use react-infinite-scroll-component inside a Material-UI Dialog modal?
body: <p>I'm using react-infinite-scroll-component in a project and it works fine outside a Dialog. When I scroll to the bottom of a page, the next set of data is fetched from the server but I can't get the same action inside my Material-UI Dialog.</p>
  <p>Here's the Dialog code:</p>
  <pre><code>//imports
  
  export default function Posts() {
    const [open, setOpen] = React.useState(false);
     //more consts
     ...
    const [posts, setPosts] = useState([]);
    const [page, setPage] = useState(1);
  
    const fetchPosts = () =&gt; {
      axios.get(`${serverURL}/news?page=${page}`).then((res) =&gt; {
        const result = res.data.results;
        setPosts([...posts, ...result]);
        setPage((prev) =&gt; prev + 1);
      });
      console.log(&quot;page&quot;, page);
    };
  
    useEffect(() =&gt; {
      fetchPosts();
    }, []);
  
    return (
      &lt;div&gt;
        &lt;h1&gt;News&lt;/h1&gt;
        &lt;Button variant=&quot;outlined&quot; color=&quot;primary&quot; onClick={handleClickOpen}&gt;
          Open News Dialog
        &lt;/Button&gt;
        &lt;Dialog
          onClose={handleClose}
          aria-labelledby=&quot;customized-dialog-title&quot;
          open={open}
        &gt;
          &lt;DialogTitle id=&quot;customized-dialog-title&quot; onClose={handleClose}&gt;
             News
          &lt;/DialogTitle&gt;
  
          &lt;DialogContent dividers&gt;
            &lt;ul
              style={{
                display: &quot;inline&quot;,
              }}
            &gt;
              &lt;InfiniteScroll
                dataLength={posts.length}
                next={() =&gt; fetchPosts()}
                hasMore={true}
                loader={&lt;h4 style={{ textAlign: &quot;center&quot; }}&gt;Loading.....&lt;/h4&gt;}
                endMessage={
                  &lt;p style={{ textAlign: &quot;center&quot; }}&gt;
                    &lt;b&gt;You read all news posts.&lt;/b&gt;
                  &lt;/p&gt;
                }
              &gt;
                {posts.length &gt; 1 &amp;&amp;
                  posts.map((post, i) =&gt; {
                    return (
                      &lt;div key={i}&gt;
                        &lt;Card className={classes.root}&gt;
                          &lt;div className={classes.details}&gt;
                            &lt;CardContent className={classes.content}&gt;
                              &lt;Typography
                                className={classes.title}
                                component=&quot;a&quot;
                                variant=&quot;h5&quot;
                              &gt;
                                {post.title}
                              &lt;/Typography&gt;
                              &lt;Typography className={classes.desc}&gt;
                                  {post.content}
                              &lt;/Typography&gt;
                            &lt;/CardContent&gt;
                          &lt;/div&gt;
                        &lt;/Card&gt;
                      &lt;/div&gt;
                    );
                  })}
              &lt;/InfiniteScroll&gt;
              );
            &lt;/ul&gt;
          &lt;/DialogContent&gt;
        &lt;/Dialog&gt;
      &lt;/div&gt;
    );
  }
  
  </code></pre>
  <p>The log doesn’t show that I reach the second page, it just stops after I reach the first 30 posts as defined in my backend.</p>
  <p>When I test this code outside a Dialog, there are no issues. The infinite scroll works fine on this small text:</p>
  <pre><code>function App() {
    const [posts, setPosts] = useState([]);
    const [page, setPage] = useState(1);
  
    const fetchPosts = () =&gt; {
      axios
        .get(`${serverURL}/api/news?page=${page}`)
        .then((res) =&gt; {
          const result = res.data.results;
          setPosts([...posts, ...result]);
          setPage((prev) =&gt; prev + 1);
        });
      console.log(&quot;page&quot;, page);
    };
  
    useEffect(() =&gt; {
      fetchPosts();
    }, []);
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;InfiniteScroll
          dataLength={posts.length}
          next={() =&gt; fetchPosts()}
          hasMore={true}
          loader={&lt;h4&gt;Loading.....&lt;/h4&gt;}
          endMessage={
            &lt;p style={{ textAlign: &quot;center&quot; }}&gt;
              &lt;b&gt;You read all news posts.&lt;/b&gt;
            &lt;/p&gt;
          }
        &gt;
          {posts.length &gt; 1 &amp;&amp;
            posts.map((post, i) =&gt; (
              &lt;div key={i}&gt;
                &lt;p&gt;{post.title}&lt;/p&gt;
                &lt;p&gt;{post.image}&lt;/p&gt;
                &lt;p&gt;{post.content}&lt;/p&gt;
                &lt;p&gt;{post.link}&lt;/p&gt;
              &lt;/div&gt;
            ))}
        &lt;/InfiniteScroll&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  
  </code></pre>
  <p>How Can I get the infinite scroll to work inside a Dialog?</p>