Month: April 2023

In React, functional components can use state by using useState(). Let’s look at a code example:

const [mode, setMode] = React.useState(0);

In the above code block we are destructuring the return value of useState. mode is a read-only constant, that can be read and used. For changing the value the setMode can be used.

The usual naming convention is the constant name for the first object and setVariableName for the function, but the function name can be anything.

The following code example demonstrates accessing the variable and updating the variable.

{{mode}}

setMode(1);

But any attempts to modify the value of the constant would result in an error.

–

Mr. Kanti Kalyan Arumilli

B.Tech, M.B.A

Facebook

LinkedIn

Threads

Instagram

Youtube

Founder & CEO, Lead Full-Stack .Net developer

ALight Technology And Services Limited

ALight Technologies USA Inc

Youtube

Facebook

LinkedIn

Phone / SMS / WhatsApp on the following 3 numbers:

+91-789-362-6688, +1-480-347-6849, +44-07718-273-964

+44-33-3303-1284 (Preferred number if calling from U.K, No WhatsApp)

kantikalyan@gmail.com, kantikalyan@outlook.com, admin@alightservices.com, kantikalyan.arumilli@alightservices.com, KArumilli2020@student.hult.edu, KantiKArumilli@outlook.com and 3 more rarely used email addresses – hardly once or twice a year.

React Fetch API is used for calling REST API’s.

First some sample code and then a lengthy discussion of various options.

const postRequestOptions = {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: {}
};

postRequestOptions.body = JSON.stringify(jsonObject);

fetch('/path', postRequestOptions)
.then(response => {console.log(response); return response.json();})
.then(data => console.log(data);

In the above code block we have declared a postRequestOptions object, for POST HTTP method, declared the content type as application/json.

Then we set the body of the postRequestOptions object by representing a json object as a string.

Then we used the fetch API, once the response is returned, we are logging the response, creating a data object from the received response’s json and logging the object to the console.

There are several options for the RequestOptions:

referrer: The referrer can be set

referrer policy: Tells the browser to set the referrer header based on the policy. “strict-origin-when-cross-origin”, “no-referrer-when-downgrade”, “no-referrer”, “origin”, “origin-when-cross-origin”, “same-origin”, “strict-origin”, “unsafe-url”.

mode: “cors”, “same-origin”, “no-cors”

credentials: Whether to send cookies and tokens. “same-origin” – default, “include”, “omit”

cache: “default”, “no-store”, “reload”, “no-cache”, “force-cache”, “only-if-cached”

redirect: “follow” – error, “error”, “manual”. If you want error to be raised for 302, instead of sending another request use “error” or you can know the status by accessing the response.status that provides the HTTP status code.

integrity: SHA256/384/512 of expected hash.

keepalive: true or false, used when you want to do something on window.onunload()

Here is a webpage with a very detailed discussion of the options:

https://javascript.info/fetch-api