Отображение X элементов в React, а затем условное отображение для элементов, которых не было в списке

Question

Я работаю над приложением Mov ie DB, которое позволяет пользователям добавлять фильмы в свой список наблюдения. Теперь проблема в том, что я хочу создать макет из 5 столбцов / 4 строки, поскольку при извлечении из API я всегда получаю ровно 20 фильмов.

Я хочу сохранить этот макет на странице моего списка наблюдения, сопоставив текущий список наблюдения и отобразив его, а затем для остальных элементов (если в списке наблюдения содержалось, например, 3 фильма) создайте 17 пустых элементов div.

Понятия не имею, как бы это настроить в React. Я представляю себе использование для l oop или есть другой способ с картой, который мне не хватает?

TLDR; Я хочу сделать ровно 20 дел на моей странице. Некоторые div будут содержать пользователей mov ie, которые они хотят наблюдать (сделано путем отображения массива списка наблюдения). Я хочу сделать остальные div, чтобы те, которые не содержат mov ie, имели в общей сложности 20 div. Как бы я сделал это с .map?

Моя текущая настройка:

const Movies = ({movies, resetPage, isLoading, addToWatchList}) => {
    return (
        <div className="movies"> 
            {
                movies.map((movie) => {
                    return (
                        <div key={movie.id} className="movies__item">
                            <Link
                                to={`/movie/${movie.id}`}
                                onClick={resetPage}
                            >                        
                            {isLoading ? 
                            <ClipLoader                    
                                size={60}
                                color={"#D72525"}
                                loading={!!isLoading}
                            /> 
                            : 
                                <img
                                    key={movie.id}
                                    src={`https://image.tmdb.org/t/p/w342${movie.poster_path}`}
                                    className="movies__item-img"
                                    alt={`A poster of ${movie.title}`}
                                ></img>}                            
                            </Link>

                            <button onClick={() => addToWatchList(movie)} className="movies__item--button">Add To WatchList</button> 
                        </div>
                    )
                })
            }
        </div>
    )
}

Answer 1

Очевидно, что вы можете Array (...). Fill (...) для достижения цели.

<div className="movies"> 
        {
            movies.map((movie) => {
                return (
                    <div key={movie.id} className="movies__item">
                        ...........
                        ...........
                    </div>
                )
            })
         }
         {
           Array(20-movies.length).fill(
                    ............ 
                    [YOUR_EMPTY_DIVS HERE]
                    ............
                        )
         }
    </div>