Fixed the message function's reply to correspond to what the front-end call expects

TL;DR: The front-end expects a json object with the "text" key, but the message function returns a simple string.

Needlessly long explanation:

Currently all the examples on the front end use the destructuring assignment const { text }, they then parse the response as a json, and then inject the value of the "text" attribute of the parsed json into the html

(I'm not sure why we don't make the front-end just take a simple assignment and expect a string, but I did not touch this).

However, Azure Functions return ONLY the value of the "body" attribute. So, before my edit, the front end tried to parse "Hello, from the API" as a json object, which did not work.

So, we need to fix either the front-end code or the back-end code. I opted to fix the back-end to actually return a json object (so the value of the "body" attribute is now a json object itself), and so that the returned string can be parsed as a json to generate an object with a "text" attribute, the value of which is what we actually want to inject into the HTML.

Author: szakosdeb

articles/static-web-apps/add-api.md

@@ -101,7 +101,7 @@ You create an Azure Functions project for your static web app's API. By default,
         methods: ['GET', 'POST'],
         authLevel: 'anonymous',
         handler: async (request, context) => {
-            return { body: `Hello, from the API!` };
+            return { body: JSON.stringify({ "text": `Hello, from the API!` }) };
         }
     });
     ```