How to render react component based on event accurately? - reactjs

Question

When event is fired, I got a warning message. What is the best approach to update component.Help please.
Warning: Can only update a mounted or mounting component. This usually
means you called setState, replaceState, or forceUpdate on an
unmounted component. This is a no-op.
import Table from "./Table";
import Tree1 from "./Tree1";
class ComponentView extends Component {
constructor(props) {
super(props);
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
viewState: <Table />
};
}
onButtonClick(event) {
event.preventDefault()
const btnValue = event.target.value;
switch (btnValue) {
case 'Table':
this.setState({ viewState: <Table /> });
break;
case 'Tree1':
this.setState({ viewState: <Tree1 /> });
break;
default:
break;
}
}
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="12" lg="12">
<Card>
<CardHeader>
<Button onClick={this.onButtonClick} color="primary" size="sm" value="Table" >Table</Button>
<Button onClick={this.onButtonClick} color="secondary" size="sm" value="Tree1">Tree1</Button>
</CardHeader>
<CardBody className="pb-0" style={{ height: '500px' }}>
{this.state.viewState}
</CardBody>
</Card>
</Col>
</Row>
</div>
)
}
}

Answer 1

You probably need to distill what your problem is - your code runs without warnings.
window.onload = () => {
console.clear();
const Row = p => <div>{p.children}</div>
const Col = p => <div>{p.children}</div>
const Card = p => <div>{p.children}</div>
const CardHeader = p => <div>{p.children}</div>
const CardBody = p => <div>{p.children}</div>
const Button = p => <button {...p} />
const Table = () => <span>Table</span>;
const Tree1 = () => <span>Tree</span>;
class ComponentView extends React.Component {
constructor(props) {
super(props);
this.onButtonClick = this.onButtonClick.bind(this);
this.state = {
viewState: <Table />
};
}
onButtonClick(event) {
event.preventDefault()
const btnValue = event.target.value;
switch (btnValue) {
case 'Table':
this.setState({ viewState: <Table /> });
break;
case 'Tree1':
this.setState({ viewState: <Tree1 /> });
break;
default:
break;
}
}
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="12" lg="12">
<Card>
<CardHeader>
<Button onClick={this.onButtonClick} color="primary" size="sm" value="Table" >Table</Button>
<Button onClick={this.onButtonClick} color="secondary" size="sm" value="Tree1">Tree1</Button>
</CardHeader>
<CardBody className="pb-0" style={{ height: '500px' }}>
{this.state.viewState}
</CardBody>
</Card>
</Col>
</Row>
</div>
)
}
}
const d = document.createElement('div')
document.body.appendChild(d)
ReactDOM.render(<ComponentView />, d)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script>