How to display html content dynamically when clicking a button in ReactJS?

Question

I have made 2 buttons and 1 input box which displays date from JSON data. When I click on increment or decrement buttons it should display the data.available_slots[0].data_slots

If data.available_slots[this.state.counter].data_slots === 0 then it should display "No slot available today" besides input box.

data.js:

const data = {
        "template_type": "slot_picker",
        "selection_color": "#000000",
        "secondary_color": "#808080",
        "title": "Available Slots for Dr. Sumit",
        "available_slots": [
          {
            "date": "Wed, Dec 06",
            "date_slots": [

            ]
          },
          {
            "date": "Thu, Dec 07",
            "date_slots": [

            ]
          },
          {
            "date": "Fri, Dec 08",
            "date_slots": [

            ]
          },
          {
            "date": "Sat, Dec 09",
            "date_slots": [

            ]
          },
          {
            "date": "Today",
            "date_slots": [
              {
                "hour": "8",
                "hour_slots": [
                  {
                    "08:10 AM": "slotId001"
                  },
                  {
                    "08:50 AM": "slotId005"
                  }
                ]
              },
              {
                "hour": "3",
                "hour_slots": [
                  {
                    "03:00 PM": "slotId005"
                  },
                  {
                    "03:30 PM": "slotId007"
                  }
                ]
              }
            ]
          },
          {
            "date": "Tomorrow",
            "date_slots": [

            ]
          },
          {
            "date": "Wed, Dec 13",
            "date_slots": [
              {
                "hour": "4",
                "hour_slots": [
                  {
                    "04:30 PM": "slotId105"
                  },
                  {
                    "04:50 PM": "slotId106"
                  }
                ]
              },
              {
                "hour": "5",
                "hour_slots": [
                  {
                    "05:30 PM": "slotId202"
                  },
                  {
                    "05:45 PM": "slotId208"
                  }
                ]
              }
            ]
          }
        ]
      };

 export default data;

datepicker.js:

import React, { Component } from 'react';
import data from './data';
import './datepicker.css';

class DatePicker extends Component {

  constructor(props){
    super(props);
     this.state = {
        counter:0
     };
   }

  increment(){
    if(this.state.counter < 6){
      this.setState(prevState => ({counter: prevState.counter + 1}))
    }
    if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  decrement(){
    if(this.state.counter > 0){
      this.setState(prevState => ({counter: prevState.counter-1}))
   }
   if(data.available_slots[this.state.counter].data_slots === 0){
        return(
            <p>No slots available for today</p>
            )
    }else{
        return(
            <p>Slots available for today</p>
            )
    }
  }

  render() {
    return (
      <div>

        <div id="center">
        <div className="title">
            <p>Pick a Date</p>
        </div>
        <div className="increment">
          <button type="button" className="btn btn-success" id="plus" onClick={this.increment.bind(this)}>+</button>
        </div>
        <div className="display">
          <input type="text" id="date" value={data.available_slots[this.state.counter].date}/>
        </div>
        <div className="decrement">
          <button type="button" className="btn btn-danger" id="minus" onClick={this.decrement.bind(this)}>-</button> 
        </div>
        <div className="submit">
          <button type="button" class="btn btn-primary" id="submit">Set Date</button> 
        </div>
      </div>

      <div id="slotinfo">

      </div>


      </div>
    );
  }
}

export default DatePicker;

When I click on plus/minus buttons for that day it should display if the slot is available for that day or not. So the increment() and decrement() functions are not returning the <p> elements besides input box.

Screenshot:

Answer 1

increment and decrement functions are just returning the <p> elements and doesn't know where to display them.

Move the logic to render "No slots available for today" or "Slots available for today" inside the render function based on the state variable this.state.counter . The logic inside increment and decrement methods can be removed.

increment(){
  if(this.state.counter < 6){
    this.setState(prevState => ({counter: prevState.counter + 1}))
  }
}

decrement(){
  if(this.state.counter > 0){
    this.setState(prevState => ({counter: prevState.counter - 1}))
  }
}

And in the render function,

<div id="slotinfo">
  { data.available_slots[this.state.counter].date_slots.length === 0 ? 
      <p>No slots available for today</p> : <p>Slots available for today</p> }
</div>