React how to track event through components

Question

I need ideas about how to solve the following problem in Reactjs:

• TextEditor -> Toolbar -> PickColorBox

I have component's relationship (parent -> children) as those listed above.

The problem: The component Toolbar has the state showPickColorBox: false that represents whether the component PickColorBox is visible or not. This state is fired by a button's click event. What I need is the button be capable of toggle the boolean value to the correct state, that is, true if the component is visible, false if it's not. But every time the button event is fired the Toolbar's constructor is called and the state showPickColorBox is set to false, even if the PickColorBox component is visible.

My solution: What I need is to track whether the component PickColorBox is visible or not to set the state to the proper value. Reading some codes I saw examples where a class is instantiated in the root component to keep tracking the events. I try to reproduce the example but it didn't work, I wasn't able to passing as props the function inside the class. I'm even not sure whether it's possible to instantiated a class in javascript, so I need some guide here.

Any help on how to solve, any other solution to this is really appreciated!

I change the code bellow to simplify, so typos in the code isn't the problem, unless is about the instantiated class and how to do it. Another thing, just to clarify the code, I'm using Draftjs framework where the component Editor, the states EditorState and onChange are inheritance.

Root component

export default class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.onChange = (editorState) => this.setState({editorState});
    this.modalHandler = new ModalHandler();
  }

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

    return (
      <div className={'editor-root'} >
        <div className={'editor-toolbar'}>
          <Toolbar
            editorState={editorState}
            onChange={this.onChange}
            modalHandler={this.modalHandler}
          />
        </div>
        <div className={'editor-textarea'} >
          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}

ModalHandler class

export default class ModalHandler {
  let boolShowComponent = false;

  toogleShowComponent = (): boolean => {
    return !boolShowComponent;
  };
}

Toolbar Component

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPickColorBox: false
    };
  }

  _onPickColorClick() {
    let bool = this.props.modalHandler.toogleShowComponent()
    this.setState({
      showPickColorBox: bool,
    });
  }

  render() {
    return (
      <div className={'ToolbarEditor'} >
        {this._onPickColorClick.bind(this)}>PickColor</button>
          {
            this.state.showPickColorBox ?
            <PickColorBox
              editorState={this.props.editorState}
              onChange={this.props.onChange}
            /> :
            null
          }
      </div>
    );
  }
}

Answer 1

I find the solution to what I was looking for. It happens that I forgot to createing a properly EventHandler class to track the events fired in children component. So here is the solution:

Root component

export default class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
    this.onChange = (editorState) => this.setState({editorState});

    /* this name makes more sense instead of modalHandler */
    this.toolbarEventHandler = new ToolbarEventHandler(); 
  }

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

    return (
      <div className={'editor-root'} >
        <div className={'editor-toolbar'}>
          <Toolbar
            editorState={editorState}
            onChange={this.onChange}
            toolbarEventHandler={this.toolbarEventHandler}
          />
        </div>
        <div className={'editor-textarea'} >
          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}

ToolbarEventHandler (ModalHandler)

/*I will change this class to hold more than one event */
/* Probably change to an array */ 
export default class ToolbarEventHandler {
  constructor() {
    this.boolShowComponent = false;
  }

  get boolShowComponent() {
    return this.boolShowComponent;
  }

  set boolShowComponent(bool){
    this.boolShowComponent = bool;
  }
}

Toolbar

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPickColorBox: false
    };
  }

  _onPickColorClick() {
    this.props.toolbarEventHandler.boolShowComponent = !this.props.toolbarEventHandler.boolShowComponent;
    this.setState({
      showComponent: this.props.toolbarEventHandler.boolShowComponent,
    });
  }

  render() {
    return (
      <div className={'ToolbarEditor'} >
        {this._onPickColorClick.bind(this)}>PickColor</button>
          {
            this.state.showPickColorBox ?
            <PickColorBox
              editorState={this.props.editorState}
              onChange={this.props.onChange}
            /> :
            null
          }
      </div>
    );
  }
}

Answer 2

Instead of handling Toolbar using showPickColorBox, try to define the same in TextEditor and pass it as props. Now, to update showPickColorBox, define a method in TextEditor and pass it as props.

export default class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
      //define here
      showPickColorBox: false

    };
    this.onChange = (editorState) => this.setState({editorState});


    this.modalHandler = new ModalHandler();
  }
  //definehere
  _onPickColorClick(bool) {

    this.setState({
      showPickColorBox: bool,
    });
  }

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

    return (

      <div className={'editor-root'} >
        <div className={'editor-toolbar'}>
          <Toolbar
            editorState={editorState}
            onChange={this.onChange}
            modalHandler={this.modalHandler}
            //pass here
            _onPickColorClick={this._onPickColorClick}
          />
        </div>
        <div className={'editor-textarea'} >
          <Editor
            editorState={editorState}
            onChange={this.onChange}
          />
        </div>
      </div>
    );
  }
}

Now call from toolbar:

export default class Toolbar extends React.Component {
  constructor(props) {
    super(props);

  }

  _onPickColorClick() {
    let bool = this.props.modalHandler.toogleShowComponent();
    //use here
    this.props._onPickColorClick(bool);
  }

  render() {
    return (
      <div className={'ToolbarEditor'} >
        {this._onPickColorClick.bind(this)}>PickColor</button>
          {
            this.state.showPickColorBox ?
            <PickColorBox
              editorState={this.props.editorState}
              onChange={this.props.onChange}
            /> :
            null
          }
      </div>
    );
  }
}