UseEffect - Use state to create an external Link

Koala7 :

I have a method getUrl() calling an API endpoint

  useEffect(() => {
    getUrl()
      .then(x => x.json())
      .then(x => {
        const { result } = x;
      });
  });

I can see in the Console the call in my page as you can see in the screenshot this is my data

{
   "result":"https://www.google.it",
   "error":null,
   "errorCode":null,
   "isSuccessful":true,
   "operationStatusCode":"OK"
}

How can I display the following result link example https://www.gooole.it in an external link in my view?

Do I have to use states?

I need an example of how to code to do this here

<a target="_blank" href={result}>Google Link</a>

LHIOUI :

You have to use a state in your component :

const [url,setUrl] = useState('');

and render it :

<a target="_blank" href={url}>Google Link</a>

and in the use effect :

useEffect(() => {
   getUrl()
     .then(x => x.json())
     .then(x => {
        const { result } = x;
        // use set url hook 
        setUrl(result);
      });
  });