setState in react can only update a mounted or mounting component - reactjs

Question

I'm getting an error stating that setstate can only be update on mounted or mounting component. I actually want to toggle display of some content. Please help me out. This is the code.
I want to toggle the boolean "show" to true or false. if true, it should show Todolist, if false, it should not show Todolist, instead it should show Footer. Pardon me for framing the question badly. But Please tell me what to do and how to do. Thank you!
import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./index.css";
import TodoList from "./TodoList";
import NavbarTodo from "./NavbarTodo";
import Footer from "./Footer";
import "bootstrap/dist/css/bootstrap.css";
var destination = document.querySelector("#container");
var navdest = document.querySelector(".putnavbarhere");
var clicked=false;
class index extends Component{
constructor() {
super();
this.state = {show: true};
this.handleAbout = this.handleAbout.bind(this);
}
handleAbout(){
this.setState({
show:false
})
clicked=!clicked
if(clicked){
ReactDOM.render(
<Footer />,
document.querySelector("#toast")
)
}
else{
ReactDOM.render(
<p> </p>,
document.querySelector("#toast")
)
};
}
}
var indObj = new index();
ReactDOM.render(
<div>
<TodoList show={indObj.state.show}/>
</div>,
destination
);
ReactDOM.render(
<NavbarTodo clicked={indObj.handleAbout}/>,
navdest
);

Answer 1

What you need is some conditional rendering.
https://reactjs.org/docs/conditional-rendering.html
Your onClick function will toggle this.state.show between true/false.
class Index extends Component {
constructor () {
super()
this.state = {show: true}
}
handleClick () {
this.setState({show: !this.state.show})
}
render () {
return (
<div>
{this.state.show &&
<Todolist component here>
}
{!this.state.show &&
<Footer component here>
}
</div>
)
}
}