How to correctly add to the html component and not update it?

Question

React

Now, when you click on the show more button, new topics are loaded into the table, deleting everything that was in the table.
I can not figure out how to add to the table when clicking on the button, and not fill it again.
Now I'm doing this:
The meaning is simple in the action, an API request is made and I get the following topics, 50 pieces each.
But when I click to load more, then after the action, the loop method in tbody is triggered, which the protso re-renders. And you need to not erase the old one.

import store from "../store";
import {fetchAllProducts} from "../actions/PoductsActions";
GetProducts = (url, code) => {
    return store.dispatch(fetchAllProducts(url ,code, true)).then(() => {
        console.log('Ok')
    })
}


handleClick = () => {
    this.GetProducts(this.props.products.item.next_page_url, this.props.products.select_sect_code)
}


render() {
    const loop = data => data.map((item) => {
        return (
            <tr key={item.IdProduct}>
                <td>{item.id}</td>
                <td>{item.name</td>
            </tr>
        )
    });
    if (typeof this.props.products.item.data !== 'undefined' && this.props.products.item.data.length > 0 ) {
        return (
       <section>
                <table>
                    <thead>
                        <tr>
                            <th>Код</th>
                            <th>Название</th>
                        </tr>
                    </thead>
                    <tbody>
                    {loop(this.props.products.item.data)}
                    </tbody>
                </table>
                <div onClick={this.handleClick} className={'catalog_list_pagination'}>еще</div>
       </section>
        );
    }
}

Answer 1

At the first load, save it in state, draw it, when you click on the button, get new data, add it to oldArray and draw it
state {
oldArray: []
}