React - ładowanie za pomocą buttona

Witam, jestem początkujący i to mój pierwszy post, więc proszę o wyrozumiałość. Otóż sprawa wygląda następująco. Pobieram sobie jakieś tam dane z API, ale chciałbym żeby na początku wyświetlało się tylko 5 pierwszych elementów i żeby kliknięcie buttona powodowało wczytanie się większej ilości postów => slice(0,5) => slice(0,10) itd. A może w ogóle nie używać do tego slice? Już sam nie wiem. Macie jakiś pomysł ? Ja nie za bardzo wiem jak się do tego zabrać. W necie jest mało pomocy jak to zrobić w React'cie. Z góry dzięki za pomoc. To nie jest mój oryginalny kod,napisałem to żeby przedstawić Wam o co mi mniej więcej chodzi.

componentWillMount(){
axios.get(url)
    .then(res=> {
        this.setState(
            {data:res.data.articles
    })
    .catch(err=>{
        console.log(err)
    })
}    
}

render(){

        let trendings = this.state.data.slice(0,5).map(article => {
            return (
                <p key={article.source.id}>{article.title}</p>
            )
        })

        return (
            <div>
                {trendings}
                <button>Load more</button> 
            </div>
        )
    }

1. Dodaj do state liczbę elementów do wyświetlenia
2. Użyj wartości ze state, zamiast "5"

this.state.data.slice(0,5)

3. Kliknięcie w button powinno powinno zwiększyć wartość w state.

Pięknie działa. Dziękuję !