Loop over actionData to create Polaris components

[sancuscommerce]

I have a Polaris form that generates a list of strings when submitted.

export default function Index() {

return (

<Page

breadcrumbs={[{ content: "Products", url: "/products" }]}

title="Settings"

primaryAction={{ content: "Save", disabled: false, onAction: handleSave }}>

</Page>

);

}

const submit = useSubmit();

async function handleSave() {

submit("", { method: "post" });

};

export const action = async ({ request }) => {

return["a","b","c"]

}

I want to do this with the Polaris components, but can't figure out how to loop over the actionData and create a text object for each item in the returned actionData:

export default function Index() {

return (

<Page

breadcrumbs={[{ content: "Products", url: "/products" }]}

title="Settings"

primaryAction={{ content: "Save", disabled: false, onAction: handleSave }}>

for (const letter of actionData) {

<Text variant="bodySm" as="p">

{letter}

</Text>

}

</Page>

);

}