泛化函数以重用不同的元素

Question

How can I generalize these two functions to use in identical divs?

showNotifyText = () => {
 const { showNotifyText } = this.state;
 this.setState({ showNotifyText: !showNotifyText });
};
showRoutineAvailabilityText = () => {
 const { showRoutineAvailabilityText } = this.state;
 this.setState({ showRoutineAvailabilityText: !showRoutineAvailabilityText });
};

Answer 1

Using this.state in setState is antipattern because setState is asynchronous . If new state derives from previous one, setState function should be used.

It could be either generalized method:

toggleStateProperty = key => {
  this.setState(state => ({ [key]: !state[key] }));
};

Or higher-order function:

toggleStatePropertyFactory = key => function () {
  this.setState(state => ({ [key]: !state[key] }));
};

...

toggleShowNotifyText  = toggleStatePropertyFactory('showNotifyText');

toggleRoutineAvailabilityText = toggleStatePropertyFactory('showRoutineAvailabilityText');

In case the method is supposed to be passed as a callback, the second option is preferable because it already binds the method to specific key:

<div onclick={this.toggleShowNotifyText}/>

vs

<div onclick={() => this.toggleStateProperty('showNotifyText')}/>

Answer 2

To generalize the method you could try adding the state key in the template as data, then read it inside the event handler:

onClick = (event) => {
  const key = event.target.dataset.key;
  const value = this.state[key];
  this.setState({ [key]: !value });
}

render() {
  return (
    <div>
      <div onClick={this.onClick} data-key="showRoutineAvailabilityText">click</div>
    </div>
  );
}