javascript - reactJS how to change between many application states -

new reactjs , trying have 1 of components alternate through many crud states (creating object, listing objects, updating objects, deleting objects), each 1 display appropriate forms...

i thinking cannot see if thinking flawed.

constructor() {     super(props);      this.state = {         list: true,         edit: false,         create: false,         // , on crud operations } 

then later there method...

handlecrudviewchange(newview) {     // flip false...     // turn correct 1 true } 

then in render this...

switch (true) { case this.state.list:     <listcomponent /> case this.state.edit:     <editcomponent /> // , on... } 

is thinking sound? "react" way things?

yes, on right track. may want simplify bit -

const modes = {list: 0, edit: 1, create: 2}, crud_components = [listcomponent, editcomponent, createcomponent]; constructor(){     this.state = {"mode" : modes.list}; }, handlecrudviewchange(newview) {    // decide relevantmode value out of list, edit or create based on logic    // , update state    this.setstate({"mode": modes[relevantmode]}); } render(){    let component = crud_components[this.state.mode];    return <component />; } 

in simple example, not having send crud mode specific state component, while in real case, may have write more logic store mode-specific props , pass them selected mode component.