Как клонировать макет домашней страницы Medium в реаги?

Question

В настоящее время я пытаюсь создать средний клон с помощью ReactionJS. Теперь я задаюсь вопросом, как бы я занялся созданием раздела «Избранные» на главной странице.

Я планирую использовать API новостей для извлечения всего моего содержимого, которое я собираюсь отобразить, в соответствующие макеты. Размышляя в меру своих возможностей, мне ясно, что как вертикальное, так и горизонтальное расположение содержимого в разделе «Избранные» требует отдельного отдельного компонента, поскольку один из них (горизонтальный компонент) повторно используется в на основе вашего чтения "раздел. Итак, мой вопрос сейчас заключается в том, как я могу отобразить полученные данные в такие макеты? Такая компоновка была бы простой для меня, если бы я должен был создавать каждый блок статьи вручную с использованием HTML, чтобы я мог проектировать (назначать CSS-класс) каждый блок отдельно, по сравнению с проектированием блоков, которые генерируются при визуализации dom. Ниже то, что я сделал до сих пор.

 useEffect(()=>{

        const fetch= async()=>{

            try{
                setLoading(true)
                const response= await axios(url)
                const results= response.data
                // console.log(results.articles.slice(0,5))
                setData(results.articles.slice(0,5))
                setLoading(false)
            }
            catch{
                setLoading(false)
            }  
        }
        fetch()

    },[url])


    const getData=(from,to)=>{
        const copiedData=[...data]
        const sliced= copiedData.slice(from,to)
        return sliced;
    }



return(
    <>
    <Categories onClick={fetchCategory}/>
    <section className={classes.featured}>
   //featured_vertical
    <Vertical postArray={getData(0,1)}  loading={isLoading}/>
    <div className={classes.featured_horizontals}>
        <Horizontal  postArray={getData(1,3)} />
    </div>
    <Vertical postArray={getData(3,4)}  loading={isLoading}/>
    </section>
    </>
)
}

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