Динамически загружать компоненты Js с помощью кнопки «Загрузить еще»

Question

Я новичок в React Js, поэтому я не могу самостоятельно найти решение своей проблемы, пожалуйста, помогите мне.

Я работаю над сайтом со страницей блога, блогами должен отображаться динамически на странице. Когда страница загружается, я хочу, чтобы у нее было 4 блога, а внизу будет кнопка, поэтому, когда пользователь нажимает на нее, React должен отображать и отображать остальные блоги.

Мой код выглядит так:

import { blogs} from "./blogs";

import { Blog} from "./Blog";


function BlogList() {
    const cardComponent = blogs.slice(0,6).map((blog, i) => {
        return (
            <Blog
                key={i}
                id={blogs[i].id}
                img={blogs[i].img.src}
                date={blogs[i].date}
                title={blogs[i].title}
                img2={blogs[i].img2.src}
                logoTitle={blogs[i].logoTitle}
                text={blogs[i].text}
            />
        );
    });

    return (
    <div>{cardComponent}</div>

)
}`````

**This code lets me display 6 blogs when the page is loaded, what I want to do is add "Load More" button under these already loaded 6 blogs, when the user clicks the button it should render and display another 4 blogs from "blogs", and again have Load More button.** Any help will be greatly appreciated,

Thank you.

Answer 1

Ваш код показывает фиксированное количество блогов (6). Вместо того, чтобы жестко задавать количество видимых блогов, вам нужно сохранить его в переменной, которую вы можете изменить позже. Мы будем использовать useState для этого. Вам также необходимо изменить количество сообщений на основе нажатия кнопки, поэтому также требуется кнопка и действие.

function BlogList() {
    // Starting number of visible blogs
    const [visibleBlogs, setVisibleBlogs] = useState(6)

    // Set the visible blogs to the current amount + 4
    // eg. if there are 10 visible post, clicking again will show 14.
    const handleClick = () => {
        setVisibleBlogs(prevVisibleBlogs => prevVisibleBlogs + 4)
    }

    const cardComponent = blogs.slice(0, visibleBlogs).map((blog, i) => {
        return (
            <Blog
                key={i}
                id={blogs[i].id}
                img={blogs[i].img.src}
                date={blogs[i].date}
                title={blogs[i].title}
                img2={blogs[i].img2.src}
                logoTitle={blogs[i].logoTitle}
                text={blogs[i].text}
            />
        );
    });

    return (
        <div>
            {cardComponent}
            <button type="button" onClick={handleClick}>
                See more
            </button>
        </div>
    )
}

Надеюсь, это поможет.

Answer 2

Вы можете сделать это следующим образом:

function BlogList() {

  const [maxRange, setMaxRange] = useState(6); 

  const loadMore = useCallback(() => {
    setMaxRange(prevRange => prevRange + 4);
  },[])

  const cardComponent = blogs.slice(0, maxRange).map((blog, i) => {
    return (
      <Blog
        key={i}
        id={blogs[i].id}
        img={blogs[i].img.src}
        date={blogs[i].date}
        title={blogs[i].title}
        img2={blogs[i].img2.src}
        logoTitle={blogs[i].logoTitle}
        text={blogs[i].text}
      />
    );
  });

  return (
    <div>
      {cardComponent}
      <button onClick={loadMore}>Load More</button>
    </div>
  )
}

Таким образом, вы можете просто сохранить максимальное количество отображаемых в данный момент Blog с в state и увеличивать его при нажатии кнопки.

Я использовал useCallback, чтобы новая функция не создавалась при повторном рендеринге компонента.