I want to display list of tables in the database if user presses '+'button and remove the list of tables when '-' button is pressed. My code is:
class DatabaseItem extends Component{
constructor(){
super();
this.state = {
tabList : [],
plusIsNext : true
};
}
flagOn(){
this.setState({
plusIsNext:!this.state.plusIsNext
});
}
showTables(){
if(this.state.plusIsNext){
httpUtil.get(`http://localhost:4553/api?query=
SELECT * FROM information_schema.tables WHERE table_schema='public'`,this.props.dbname).then(response => {
this.setState({
tabList:response.data
})
});
}
else{
let arr = [];
this.state.tabList = [];
console.log(this.state.tabList);
}
this.flagOn();
}
render(){
let sign = this.state.plusIsNext ? '+':'-';
return(
<div key ={this.props.dbname} >
<button onClick ={() => {this.showTables()}}>{sign}</button><a>{this.props.dbname}</a>
{this.state.tabList.map(table => {
return(
<div key = {table.table_name}>{table.table_name}</div>
);
})}
</div>
);
}
}For now I have updated the value of tabList directly by reassigning empty array [] to this.state.tabList and it works. If I press the + button tables of the particular database is shown and if I press the - button the list disappears. But if I use the setState to reassign empty array to tabList, the tabList doesn't get empty.
this.setState({
tabList:[]
})
or
let arr = [];
this.setState({
tabList:arr
});Am I missing something?