How to remove item from a generic Array in React Typescript?
How to remove item from a generic Array in React Typescript?
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.
DropdownBasicExample2 Give this a try. Remove items based on a property. In this case I am using the key. You could 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 (
<ul>{
this.state.selectedItems.map((site:IDropdownOption)=> {
return <li>{site.text}</li>
})
}
</ul>
selectedSite ? selectedSite.key: "is empty"
}
</div>
);
}
}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 (
);
}
public onChangeMultiSelect = (item: IDropdownOption,index:number): void => {
this.props.onChanged(item,index);
};
}
2 Answers
2
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
});
}filter out the item from the array.filterprivate 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
});
};
I used your code, but it does not remove the items from the newly created array. they are still in the array.
– Burre Ifort
Jul 2 at 13:12
@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.
– Tholle
Jul 2 at 13:13
onChanged
I will include above my entire code. Perhaps that will be easier.
– Burre Ifort
Jul 2 at 13:14
@BurreIfort Try to include a Minimal, Complete, and Verifiable example.
– Tholle
Jul 2 at 13:15
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.
– Burre Ifort
Jul 2 at 13:22
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
It worked!! Thanks for your help.
– Burre Ifort
Jul 2 at 14:22