React JSX How can I switch component state between two objects on a timer

Question

I am having trouble switching component state using two objects.

Basically I have a screen that I want to loop through two objects displaying them through the same component. I am fairly new to react so I wasn't sure of the proper way to complete this.

I have been using the component mount methods as well as setInterval(), code below.

Current State it changes from the first object to the second object and continues to go through the timer but doesn't change back to first object.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';



var pizzaMenu = {items: [
      {
        name: 'PEPPERONI & CHEESE',
        description: "cheese and peperoni",
        price: "$5.99 P / $9.49 M / $11.49 L / $14.49 XL"
     },
     {
       name: 'MARGARITA PIZZA',
       description: "Fresh basil, roma tomatoes, and balsamic glaze",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'HAWAIIAN PIZZA',
       description: "Honey ham topped with pineapple",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'WHITE PIZZA',
       description: "Spinach, onion, tomato and white garlic sauce",
       price: "5.99 P / 10.99 M / 13.99 L / 15.99 XL"
     },
     {
       name: 'HOT!! PEPPA HAM',
       description: "Mama Lil's hot peppas and spicy capicola ham",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'SWEET PEPPER HAM',
       description: "Sweet peppadew peppers and honey baked ham",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'SUPREME PIZZA',
       description: "Pepperoni, sausage, green peppers, mushrooms, onion, black olives",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'MEAT LOVERS PIZZA',
       description: "Pepperoni, sausage, ham, bacon",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     },
     {
       name: 'BBQ CHICKEN PIZZA',
       description: "BBQ Sauce, grilled chicken, bacon and onion",
       price: "5.99 P / 12.99 M / 14.99 L / 16.99 XL"
     }
     ]}

     var pizzaMenuTwo = {items: [
           {
             name: 'Test',
             description: "cheese and peperoni",
             price: "$5.99 P / $9.49 M / $11.49 L / $14.49 XL"
           }
          ]}



class Standard extends Component {
  constructor(props){
    super(props);
    this.state = pizzaMenu

  }



 componentWillMount() {
    console.log('ComponentWillLMount');

  }

  componentDidMount () {
    console.log('ComponentDidMount');
    setInterval(() => {
    this.switch();
  }, 2000);
  }

  shouldComponentUpdate() {
    console.log('ShouldComponentUpdate');
    return true;
  }

  componentWillUpdate() {
    console.log('Will Update');
  }

  componentDidUpdate(){
    console.log('ComponentDidUpdate');
  }



switch = () => {
  if(this.state !== pizzaMenuTwo){
  this.setState(pizzaMenuTwo);
}
else {
  this.setState(pizzaMenu);
}
}

  render() {
    console.log('ComponentRender');
    let items = this.state.items


      return (
        <div className="container-fluid p-5">
            {items.map(item  =>
              <div className="row p-3">
              <div className="text-justify text-capitalize" key={item.name.toString()}>
              <h2><span className="display-4">
                {item.name}
              </span></h2>
              <h4><span className="description">
                {item.description}
              </span></h4>
              <span className="">
                {item.price}
            </span>
            </div>
            </div>
          )}
        </div>
    )
  }
}


export default Standard;

Answer 1

The problem is here

switch = () => {
  if(this.state !== pizzaMenuTwo){
    this.setState(pizzaMenuTwo);
  }
  else {
    this.setState(pizzaMenu);
  }
}

this.state !== pizzaMenuTwo doesn't do a deep equality check, however if you set the items state and check it, it will work

switch = () => {
    if (this.state.items !== pizzaMenuTwo.items) {
      this.setState({items: pizzaMenuTwo.items});
    }
    else {
      this.setState(pizzaMenu);
    }
  }

Working codeSandbox