React – useState and mapping

I am going to do my best to try and articulate this – so hopefully this is clear. I am currently building a “Quote Builder” in React, which I am learning with as we go.

I am using the WPAPI to hook into the data within WordPress, which also uses ACF to gather further data – which I have done (screenshot attached of a sample bit of data I am calling).

I then have an OnChange function which grabs the data (from the screenshot), which will then need to update the state – which will then update the page itself:

const quoteTypeChange = async (e) => {
    e.preventDefault();
    const optionValue = e.target.value;
    try {
        await wp.quoteType().id(optionValue).then((data) => {
            const quoteTypeDetails = data;
            // useState update here //
        }).catch((error) => {
            // Error //
        });
    } catch (error) {
        // Error //
    }
}

Within the “Quote Builder” it will display the data into a table – which I have build the front-end of it and its using the following components:

<QuotePhaseTitle title="Title goes here" style="primary" />

and:

<QuoteComponentRow inclusion="Inclusion goes here" deDesktop="2" deMobile="2" deWireframe="2" digital="2" notes="Test notes" />

What I want to be able to do is using the data from the screenshot, map out the data and structure it using those components. From the data the “phase” element will use “QuotePhaseTitle” component and the “quote” will use the “QuoteComponentRow” component, but those can exist in any order and repeated however often that is needed – but they have to go in the order that appears in the data flow – if that makes sense.

How would you go about doing this?

Data