CODEWITHSUNDEEP
javascriptreactjssharepoint-onlineweb-partsspfx
kmurali krishna
kmurali krishna

Reputation: 23

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>

enter image description here

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>)}})

enter image description here

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 ?

Upvotes: 0

Views: 66

Answers (2)

Esub Vali Sayyed
Esub Vali Sayyed

Reputation: 26

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,
  },
];

Upvotes: 0

Nikolay
Nikolay

Reputation: 12245

You need to return the items to render here:

this.state.sitecontents.map(function(mylists,mylistitemkey){

In the first fragment, you need to return something from the function. In the first fragment, you do, but in the second fragment, you do not return anything from the function used in map. Therefore, you get an empty result.

You could try using find instead of filter, somewhat like this (:

/// assuming you have a definition like:
const listtempates = [
 { Code: 101, Name: "Document Library" },
 { .... }
];

this.state.sitecontents.map(function(mylists,mylistitemkey) {
  const found = listtempates.find(a => a.Code === mylists.BaseTemplate);
  return (
    <li>
      <span>{mylists.Title}</span> &emsp; <span>{found.Name}</span>
    </li>)
   );
})

Upvotes: 0

Related Questions