DEV Community: Sneachta O'Fuichtard

Is there a better way to get a document icon image in React apart from this lunacy?

Sneachta O'Fuichtard — Fri, 08 Oct 2021 21:54:25 +0000

So I have a Fluent UI DetailsList component in a React SPFx web part and I get it to display the icon through this awful code...


constructor(props) {    
    super(props); 
    const columns: IColumn[] = [
      {
        key: 'column1',
        name: 'File Type',
        //className: classNames.fileIconCell,
        //iconClassName: classNames.fileIconHeaderIcon,
        ariaLabel: 'Column operations for File type, Press to sort on File type',
        iconName: 'Page',
        isIconOnly: true,
        fieldName: 'name',
        minWidth: 16,
        maxWidth: 16,
        onColumnClick: this._onColumnClick,
        onRender: (item: IDocument) => {
          //return <img src={item.iconName} className={classNames.fileIconImg} alt={item.fileType + ' file icon'} />;
          return <img src={'https://modernb.akamai.odsp.cdn.office.net/files/fabric-cdn-prod_20210703.001/assets/item-types/20/' + item.DocIcon + '.svg'} alt={item.DocIcon + ' file icon'} width='20' height='20' />;
        },
      },

Property 'value' does not exist on type 'never'.

Sneachta O'Fuichtard — Thu, 07 Oct 2021 11:55:19 +0000

I have some code which works ...

selectedOptions.forEach(function (value) {
      console.log(value);
      console.log(value.value);
      console.log(value.label);
    });

console.log(value) gives
{value: 'Choice 1', label: 'Choice 1', isInTree: true}

However if I try to pass "selectedOptions" to a function (code below) it gives an error on
console.log(value.value);

Saying Property 'value' does not exist on type 'never'.

Also
console.log('itemIsInSelectedOptions is now:' + value);
gives me ...
itemIsInSelectedOptions is now:[object Object]

Any ideas?
Thanks
S

public render(): React.ReactElement<IReactFilteredListProps> {
    const { selectedOptions } = this.state;




this.setState({
        selectedOptions,
        Items: Text ? this._allItems.filter(i => this.itemIsInSelectedOptions(i.Category, selectedOptions)) : this._allItems
      });

private itemIsInSelectedOptions(theCategory: string, selOpts:[]): boolean
  {

    selOpts.forEach(function (value) {
      console.log('itemIsInSelectedOptions is now:' + value);
      console.log(value.value);
      //console.log(value.label);
    }); 

    return true;
  }

What does ? : mean in this line of code?

Sneachta O'Fuichtard — Thu, 07 Oct 2021 10:12:55 +0000

Total newbie here but can someone explain this line of code?

Items: Text ? this.getFilteredItems(this._allItems) : this._allItems

Thanks
S

Selecting multiple values and applying them to a DetailsList

Sneachta O'Fuichtard — Thu, 07 Oct 2021 09:45:37 +0000

Hi
I am trying to filter a DetailsList by getting the values from a Select.

I am able to filter the DetailsList by using hard-coded text but I'd like to be able to loop through the selected options and check for those.

Thanks
S

private handleChange = (selectedOptions) => {

  this.setState({

    selectedOptions,
    Items: Text ? this._allItems.filter(i => i.Category.toLowerCase().indexOf("choice 1") > -1) : this._allItems

  });


selectedOptions.forEach(function (value) {
  console.log(value);
  console.log(value.value);
  console.log(value.label);
});

}