Сохранение другого значения в одном состоянии

Question

Я сделал 3 компонента на одной странице, увеличив значение состояния.Я отслеживал различные страницы в последовательности, используя массив. Я пытался сохранить значение кнопки каждой страницы в новом состоянии. Но я хочу, чтобы все значения состояния сразу в одном состоянии сохранялись в моей базе данных. Ноя не понимаю, как это сделать. Это мой код:

import axios from "axios";
import React from "react";

class Pages extends React.Component {
    state = {
        apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
        currentPage: "property",
        pages: ["property", "type", "firstBusiness"],
        start: true,
        end: false
    };


    //page navigation

    changePage = event => {
        const { currentPage, pages } = this.state;
        const { name } = event.target;
        //check if we are going to end
        if (
            name == "next" &&
            pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]
        ) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                end: true,
                start: false
            });
            //go to next page
        } else if (name == "next") {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                start: false
            });
            //check if we are going to beginning
        } else if (
            name == "back" &&
            currentPage !== pages[0] &&
            pages[pages.indexOf(currentPage) - 1] == pages[0]
        ) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) - 1],
                start: true
            });
            //go back one page
        } else {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) - 1],
                end: false
            });
        }
    };

    goToNextPage = () => {
        const { currentPage, pages, end } = this.state;
        //check if we are going to end
        if (pages[pages.indexOf(currentPage) + 1] === pages[pages.length - 1]) {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                end: true,
                start: false
            });
            //go to next page
        } else if (end) {
            return;
        } else {
            this.setState({
                currentPage: pages[pages.indexOf(currentPage) + 1],
                start: false
            });
        }
    };
    ////page navigation ends 


    //saving in a state

    saveValue = (e) => {
        console.log('savecategory', e.target.innerHTML);

        this.setState({
            category: e.target.innerHTML
        }, this.makingAxiosRequest);

    };

    makingAxiosRequest = () => {
        axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'categoryName':this.state.category,
        }, {})
    };
    savedValue = (e) => {
        // console.log('savecategory', e.target.innerHTML);

        this.setState({
            subCategory: e.target.innerHTML
        }, this.makeAxiosRequest);

    };

    makeAxiosRequest = () => {
        axios.post( this.state.apiUrl+'/api/v1/LeadSurvey/save', {
            'subCategoryName':this.state.subCategory,
        }, {})
    };
    //saving in a state ends

    render() {
        const { currentPage, start, end } = this.state;
        return (
            <div style={{ background: "gray" }}>
                {currentPage === "property" ? (
                    <div>
                        <p>What is the type of your property?</p>
                        <button   onClick={(e)=>{this.saveValue(e),this.goToLastPage()}} >Residence</button>
                        <button   onClick={(e)=>{this.saveValue(e),this.goToLastPage()}} >Commercial</button>
                    </div>
                ) : null}

                {currentPage === "type" ? (
                    <div>
                        <p>What is the type of your commercial property?</p>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Office</button>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Restaurant</button>
                        <button   onClick={(e)=>{this.savedValue(e),this.goToNextPage()}} >Outlet</button>

                    </div>
                ) : null}

                {currentPage === "firstBusiness" ? (
                    <div>
                        <p>Is this your first business?</p>
                        <button onClick={this.goToNextPage}>Yes</button>
                        <button onClick={this.goToNextPage}>No</button>
                    </div>
                ) : null}

                <div>
                    <button onClick={this.changePage} name="back" disabled={start}>
                        Back
                    </button>
                    <button onClick={this.changePage} name="next" disabled={end}>
                        Next
                    </button>
                </div>
            </div>
        );
    }
}

export default Pages;

this.savedValue, this.saveValue - это две функции, которые сохраняют 2 разных значения кнопки в 2 разныхЯ хочу, чтобы мои данные были сохранены следующим образом.

"data": {
    "categoryName": "residence",
    "createdBy": null,
    "createdDate": "2019-07-10T23:07:49.012452+00:00",
    "id": "",
    "subCategoryName": "commercial "
  },

Но это как один элемент. Как я могу это сделать? Вот ссылка для кодов и ящиков для визуализации: https://codesandbox.io/s/questionarie-31jmc