Return method values are not displaying in webpart

we are working with a SPFX webpart, pulling SP site Lists and list template. please tack a look the output we are getting

Here is the piece of code to the above output.

public render(): React.ReactElement<IGetSpListsProps> {
return (
<div>
  <ol>
    {    
        this.state.sitecontents.map(function(mylists,mylistitemkey){
        return(
        <li>
        <span>{mylists.Title}</span> &emsp; <span>{mylists.BaseTemplate}</span>
        </li>);
      })
    }
    </ol>
</div>
);

}

here actual issue is List template is returns as number, so each List template number has friendly names like 100=Custom List , 101= Document Lib etc.. here is the link to display list of templates with friendly names.

so we have created a TS file in the Component solution to with all template number with friendly names. imported the list template file in to TSX file.

We tried to modify the above code to get friendly name using the base template number return method is not returning any values. Please see the blow code.

<ol>
    {    
        this.state.sitecontents.map(function(mylists,mylistitemkey){
          listtempates.filter((a:any) =>{
          if(a.Code === mylists.BaseTemplate)
          {
          return(
        <li>
        <span>{mylists.Title}</span> &emsp; <span>{a.Code}</span>
        </li>)}});
      })
    }
    </ol>

I added console.log() in the if condition to check if condition is executing or not till the if its working but inside return its not working.

if(a.Code === mylists.BaseTemplate)
          {
            console.log("Condition Test is executed or not");
          
          return(
        <li>
        <span>{mylists.Title}</span> &emsp; <span>{a.Code}</span>
        </li>)}})

what is the issue here how to resolve the issue here but make sure we have to refer/import the file to lookup the friendly names from base number.

any assistance please ?

please find below answer

public render(): React.ReactElement<IGetSpListsProps> {
const listItems = this.state.sitecontents.map(function (myLists) {
  let items;

  if (myLists.BaseTemplate) {
    for (let i of listTempates) {
      if (i['Code'] == myLists.BaseTemplate) {
        items = (
          <li key={i['Code']}>
            <span>
              {myLists.Title}&nbsp;{i.Template}
            </span>
          </li>
        );
      }
    }
  }

  return items;
});

return (
  <div>
    <ol>{listItems}</ol>
  </div>
);
}

Your Template items should be like below

export const listTempates = [
  {
    Template: 'Custom List',
    Code: 100,
  },
  {
    Template: 'List1',
    Code: 101,
  },
  {
    Template: 'List2',
    Code: 102,
  },
];