Using fetch to Retrieve Message Data for React App

The lecture goes over the use of fetch to retrieve data for the messages in a React application.

The Fetch API can be used to make an HTTP request to a backend server such as an API that serves data in the JSON format.

With a GET request, the default behavior of fetch, data for messages in a chat room-like user interface are retrieved.

The call to fetch returns a Promise that fulfills with a Response object.

You can extract the body of the response and interpret its text content as JSON, thus creating a JavaScript object with the mapped information. This is also known as deserialization or unmarshalling.

The json method of the response object can be called to extract the body of the response and read it as JSON, thus creating a JavaScript data structure with the data. In the example, it creates an array of objects.

Note the return value of the call to json is another Promise that fulfills with the deserialized value, so another call to then is necessary. Having multiple then statements in a row can be called a promise chain.

The map method of the array is used to transform it into another array with the relevant information.

The array of things that represent each message are then used to set the React state for messages.