SPFx - How to get the URL and description from a hyperlink?

Question

I'm trying to create a React SPFx web part which can render items from a SPO list.

I am having difficulty if the column is a Hyperlink. (I can get the value if it is a string).

Does anyone know how to render the value if it's a hyperlink?

public render(): React.ReactElement<ISplistitemsdataProps> {  

  const onRenderItemColumn = (item: ISplistitemsState, index: number, column: IColumn) => {

  const fieldContent = item[column.fieldName as keyof ISplistitemsState] as any;
  let typeOfThisObject: string = (typeof fieldContent).toString();
  let valueToReturn: string = "";

  if(typeOfThisObject == "object") {

    try {
      valueToReturn = fieldContent.toString();
      valueToReturn = 

      const values = Object.keys(fieldContent).map(key => fieldContent[key]);
      //valueToReturn = "<a href='" + values[1] + "'>" + values[0] + "</a>";
      //valueToReturn = "object:" + values[1] + "-" + values[0];

      const values2 = Object.keys(values[0]).map(key => values[0][key]);
      //valueToReturn += "object2:" + values2[1] + "-" + values2[0];

} catch (e) {
          valueToReturn = e.message.toString();
        }

      } else {
        valueToReturn = "not object:" + fieldContent;
      }

Answer 1

Hyperlink columns have data object/value in below format:

{
    "Description": "Google Home",
    "Url": "www.google.com"
}

So, considering name of your column is HyperlinkCol, you can get description using:

item.HyperlinkCol.Description;

& URL using:

item.HyperlinkCol.Url;