What is the proper way to delete a tab, without experiencing hasOwnPropertyOfNull?

[jiwayProgrammer]

-Whenever I try to delete a tab which holds something inside, for example, ReactGridLayout with grid items I get an error: "hasOwnPropertyOfNull" with reference to ext.js:1, and when I try to delete a tab with no content inside it, then it works fine with no errors. It's like it doesn't want to delete a tab if it holds references to something else.

-The way I delete something is:


var component = Ext.getCmp(dashboardTabRef.getId());
/* I have console.log-ed the component, and I get the right component that I want. */
component.destroy(); /* I have also tried with component.remove() */
/* Then I perform Redux actions to delete something from the database as well, and to refresh the current list of tab panels. */


as I read, this is the proper way to delete/remove something (https://www.sencha.com/forum/showthr...troy-component).

-This is the error that I am experiencing:

hasOwnPropertyOfNull.jpg

-Is there any way to prevent this?

[Forum_Adm]

Sorry for the delay. I am sending your question to a team member that can help you. Thanks for your patience!

[Jaraj]

In ExtReact, it is best not to use ExtJs methods to destroy components from DOM as react does it automatically on state change.
Use state to show/hide tabs and hidden tabs will not be rendered by react renderer.
For eg : import React, { Component } from 'react';
import { Container, Grid, Column, Toolbar, Button } from '@sencha/ext-modern';


export default class RelArrayDelete extends Component {


store = Ext.create('Ext.data.Store', {
data: [
{ first: 'Mark', last: 'Brocato' }
]
});


state = {
showLastName: true
}


toggleLastName = () => {
this.setState({ showLastName: !this.state.showLastName });
}


render() {
const { showLastName } = this.state;


return (
<Container layout="vbox">
<Container>
<div>This tests that children which are mapped to array configs can be added and removed</div>
</Container>
<Toolbar docked="top">
<Button handler={this.toggleLastName} text="Toggle Last Name"/>
</Toolbar>
<Grid
itemId="grid"
flex={1}
store={this.store}
itemConfig={{
viewModel: {


}
}}
>
<Column text="First" dataIndex="first"/>
{ showLastName && <Column itemId="lastName" text="Last" dataIndex="last"/>
}
{ showLastName && <Column itemId="lastName1" text="Last" dataIndex="last"/>
}
</Grid>
</Container>
)
}

}
Here, we are hiding/showing columns ..we don't need to destroy them.

Regards,
Joe.