How to remove item from a generic Array in React Typescript?

Question

Can someone show me how to remove an object in the newly created array? parameter "index" does not work well in this case as it is not really the index of the newly created array.

I am creating the new array in the onchange event.

Here I am including the full code. Just in case someone has got an idea.

import * as React from 'react';
import styles from './ListItems.module.scss';
import { IListItemsProps } from './IListItemsProps';
import { escape } from '@microsoft/sp-lodash-subset';
import  {DropdownBasicExample} from './DropdownExample'
import { IDropdownOption, DropdownMenuItemType } from 'office-ui-fabric-react';
import { DropdownBasicExample2 } from './Dropdown2.Basic.Example';

export interface IListItemsState{
  selectedItems:IDropdownOption[];
  selectedSite:IDropdownOption;
}

export default class ListItems extends React.Component<IListItemsProps, IListItemsState> {
  private myWeb:IDropdownOption;

  constructor(props){
    super(props);
      this.state = {
        selectedItems:[],
        selectedSite:null
      }
  }

  private sites = [
    { key: 'Header', text: 'Actions', itemType: DropdownMenuItemType.Header },
    { key: 'A', text: 'Site a', title: 'I am Site a.' },
    { key: 'B', text: 'Site b' },
    { key: 'C', text: 'Site c' },
    { key: 'D', text: 'Site d' },
    { key: 'E', text: 'Site e' },
     { key: 'F', text: 'Site f' },
    { key: 'G', text: 'Site g' },
    { key: 'H', text: 'Site h' },
    { key: 'I', text: 'Site i' },
    { key: 'J', text: 'Site j' }
  ];

  private loadSites= (): Promise<IDropdownOption[]> => {
    return new Promise<IDropdownOption[]>((resolve: (sites: IDropdownOption[]) => void, reject: (error: any) => void) => {
      setTimeout(() => {
        resolve(this.sites);
      }, 1000);
    });
  }

  private onChanged = (item: IDropdownOption, index?: number): void => {
    let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
      mySelectedItems = mySelectedItems.filter(selectedItem => selectedItem !== item);
  }

  this.setState({
    selectedItems: mySelectedItems
  });


    console.log(mySelectedItems);


  }


  public render(): React.ReactElement<IListItemsProps> {
    const {selectedSite} = this.state;
    return (
      <div className={styles.listItems}>


      <DropdownBasicExample loadOptions={this.loadSites} onChanged={this.onChanged}   />       

              <div id="showItems"></div>
              <ul>{
                this.state.selectedItems.map((site:IDropdownOption)=> {
                return <li>{site.text}</li>
              })
              }

              </ul>
              <div>selected Site {
              selectedSite ? selectedSite.key: "is empty"                
                }</div>
      </div>
    );
  }

}

DropdownBasicExample2

import * as React from 'react';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';

import './Dropdown.Basic.Example.scss';
import { BaseComponent, createRef, IBaseProps } from 'office-ui-fabric-react';

export interface IDropdownBasicExample2State{
    selectedItem?:  IDropdownOption;
    selectedItems: IDropdownOption[];
    options: IDropdownOption[];
}


export interface IDropdownBasicExample2Props  extends IBaseProps{
  onChanged?: (option: IDropdownOption, index?: number) => void;
  Options: IDropdownOption[];
}
export class DropdownBasicExample2 extends BaseComponent<IDropdownBasicExample2Props,IDropdownBasicExample2State> {
  private _basicDropdown = createRef<IDropdown>();
  private alphas:IDropdownOption[]; 
  private array2: Array<IDropdownOption>;
  constructor(props: IDropdownBasicExample2Props) {
    super(props);
    this.state = {
      selectedItem: null,
      selectedItems: [],
      options:[]
    };
  }

componentDidMount(){

}

  public render() {
    const { selectedItem, selectedItems } = this.state;

    return (
      <div className="docs-DropdownExample">


        <Dropdown
          placeHolder="Select options"
          label="Multi-Select controlled example:"
          selectedKey={selectedItem ? selectedItem.key : undefined}
          key={selectedItem ? selectedItem.key : undefined}
          onChanged={this.onChangeMultiSelect}
          multiSelect
          options={this.props.Options}
        />

      </div>
    );
  }

  public onChangeMultiSelect = (item: IDropdownOption,index:number): void => {

    this.props.onChanged(item,index);
  };

}

Tholle · Accepted Answer · 2018-07-02 12:54:03Z

2

You could filter out the item from the array.

private onChanged = (item: IDropdownOption, index?: number): void => {
  let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
    mySelectedItems = mySelectedItems.filter(
      selectedItem => selectedItem !== item
    );
  }

  this.setState({
    selectedItems: mySelectedItems
  });
};

answered Jul 2, 2018 at 12:54

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Burre Ifort Over a year ago

I used your code, but it does not remove the items from the newly created array. they are still in the array.

Tholle Over a year ago

@BurreIfort That's frustrating. Could you include your state and how you call onChanged in your code? It will be hard to say what could be wrong otherwise.

Burre Ifort Over a year ago

I will include above my entire code. Perhaps that will be easier.

Tholle Over a year ago

@BurreIfort Try to include a Minimal, Complete, and Verifiable example.

Burre Ifort Over a year ago

I have included it. it is just an example. However, using the index parameter I am able to remove them, but the only thing is that "index" returns the index of the original array and is not zero based. So, I was trying to get the index of the object in the array. It is very confusing in React.

|

Imir Hoxha · Accepted Answer · 2018-07-02 14:20:48Z

1

Give this a try. Remove items based on a property. In this case I am using the key.

 private onChanged = (item: IDropdownOption, index?: number): void => {
    let mySelectedItems = [...this.state.selectedItems];

  if (item.selected) {
    mySelectedItems.push(item);
  } else {
      mySelectedItems = mySelectedItems.filter(selectedItem => selectedItem.key !== item.key);
  }

  this.setState({
    selectedItems: mySelectedItems
  });

  }

answered Jul 2, 2018 at 14:20

Imir Hoxha

1,7046 gold badges31 silver badges56 bronze badges

Collectives™ on Stack Overflow

How to remove item from a generic Array in React Typescript?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related