Toggle Class in if else statement-React

I created a simple example of how you can update your code, also with two components (similar to the idea by @THEtheChad), but without using context since according to react docs it is discouraged to use context directly if you want your app to be stable. If state and props management in app gets too complicated you can include redux (which internally also uses context), but for now I am not including redux since it be might over-complication in this simple case.

Here is PizzaList which has pizzas on its state. The component will render PizzaItem components and pass a callback down so that each PizzaItem can notify its parent (PizzaList) when it is clicked. PizzaList has the responsibility of toggling PizzaItem when it is clicked.

class PizzaList extends React.PureComponent {
    state = {
      pizzas: []
    }
    componentDidMount() {
      // fetch data about pizzas via an API and perform this.setState
      this.setState({ pizzas: [{ seat: 20, occupied: false }, { seat: 10, occupied: true }, { seat: 30, occupied: true }] });
    }
    handlePizzaItemClick = (pizzaInd) => {
      this.setState((prevState) => {

        // find clicked pizza and toggle its occupied property
         const pizzas = prevState.pizzas.map((pizza, ind) => {
            if (ind === pizzaInd)
               return { ...pizza, ...{ occupied: !pizza.occupied } };

            return pizza;
         });

        return { pizzas: pizzas };
      });
    }
    render () {
        return (
            <ul>
              {this.state.pizzas.map((pizza, index) => 
                <PizzaItem 
                  onClick={this.handlePizzaItemClick} 
                  index={index} 
                  pizza={pizza}
                />)}
            </ul>
        );
    }
}

PizzaItem is a simple function component that doesn't have any state.

const PizzaItem = ({ index, pizza, onClick }) => {
    const { seat, row, occupied } = pizza;
    const pizzaClassName = occupied ? 'coloring' : 'colored';

    return (
      <li key={index} 
        className={pizzaClassName} 
        onClick={() => onClick(index)}> 
        Seat: {seat} {row}
      </li>
    );
}

Here is a working example on codesandbox.

I would update your code and split it into two components, a list component and an item component (in this case pizza?). The list component would provide a method for modifying the list using the context API. In my example, I have an updatePizza method that I pass down in the context.

Then, in the child component, you have a click handler that updates the occupied status of the pizza and tells the parent what the new status is using the context method.

This makes sure that the parent component always has the current state for all the pizzas and passes that down to the children. The parent component becomes the single source of truth here.

class List extends React.Component {
  static childContextTypes = {
    updatePizza: React.PropTypes.func
  }

  constructor({ pizzas }){
    super()
    this.state = { pizzas }
  }

  updatePizza = (idx, pizza) => {
    this.setState( ({ pizzas }) => {
      pizzas[idx] = pizza;
      return { pizzas }
    })
  }

  getChildContext() {
    return { updatePizza: this.updatePizza }
  }

  render(){
    return <ul>{this.state.pizzas.map((pizza, idx) => <Pizza key={ idx } { ...pizza }>)}<ul>
  }
}

class Pizza extends React.Component {
  static contextTypes = {
    updatePizza: React.PropTypes.func
  }

  handleClick = () => {
    this.state.occupied = !this.state.occupied;
    this.context.updatePizza(this.state.key, this.state)
  }

  render() {
    const { key, seat, row, occupied } = this.state;
    const status = occupied ? 'coloring' : 'colored';
    return <li key={ key } className={ status } onClick={ handleClick }> Seat: { seat } { row }</li>
  }
}