ReactJS - An elegant way to switch state

Question

I have a simple show / hide style that needs to be switched to the click event. Here is what I have:

  constructor(props) {
    super(props);
    this.state = {iover: 'hide'}
  }

  handleClick(event) {  
    // this is wrong, it returns a true or false    
    this.setState({ iover: !this.state.iover });
    // this doesn't toggle
    // this.setState({ iover: this.state.iover = 'hide' ? this.state.iover = 'show' : this.state.iover ='hide' });
    event.preventDefault()
}

I want to switch the value of this.state.iover between 'show' and 'hide'.

What will be the most elegant way to do this.

Answer 1

This is the best I could come up with, hoping for something shorter:

    handleClick(event) {
      let show = this.state.iover;
      let index = show.indexOf('show');

      if (index != -1) {
          show = 'hide';
      } else {
          show = 'show';
      }

      this.setState({ iover: show });
      event.preventDefault()
}

Answer 2

One way to do this is to save your state as a boolean value of true or false, and then set the ternary operator wherever you want the value to “hide” or “show”. For example:

  getInitialState: function() {
    return {
      iover: false
    };
  },

  handleClick: function() {
    this.setState({
      iover: !this.state.iover
    });
  },

  render: function(){
    return (
      <div className={this.state.iover ? 'show' : 'hide'}>...</div>
    );
  }

Answer 3

, :

class Toggle extends React.Component{

constructor(props){
    super(props);
    this.handleToggleVisib = this.handleToggleVisib.bind(this);
    this.state = {
         visib : false 
    }
}

handleToggleVisib(){
    this.setState({ visib : !this.state.visib });
}

render(){
    return(
        <div>
        <h1>Toggle Built</h1>
        <button onClick={this.handleToggleVisib}>
        {this.state.visib? 'Hide Button' : 'Show Button'}
        </button>
        <div>
        {this.state.visib && <p>This is a tough challenege</p>}
        </div>
        </div>
      );
    }
}

 ReactDOM.render(<Toggle />,document.getElementById('app'));

Answer 4

, @mark-anderson - "" , ( React):

this.setState(prevState => ({
  iover: !prevState.iover
}));

* "/" , :

this.setState(prevState => ({
  iover: prevState.iover === 'hide' ? 'show' : 'hide'
}));

Answer 5

React, classnames (https://github.com/JedWatson/classnames)

, , /.

, :

state = {
    isOpen: false
}

toggleDropdown = () => {
    const toggledIsOpen = this.state.isOpen ? false : true;

    this.setState({
        isOpen: toggledIsOpen
    });
}

Then in the onClick handler for my drop-down list, I use class names to print class = "dropdown" or class = "dropdown is-open":

// conditionally add 'is-open' class for styling purposes
   const openClass = classNames("dropdown", {
        "is-open": isOpen
   });


return (
    <div className={openClass} onClick={this.toggleDropdown}>[dropdown contents here]</div>
);

Answer 6

constructor(props) {
  super(props);
  this.state = {iover: false}
}

updateState = () {
  this.setState(prevState => ({
    iover: !prevState.iover
  }));
}

render() {
  return (
    <div className={this.state.iover ? 'show' : 'hide'}>...</div>
  );
}