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:

Bless · Accepted Answer · 2018-02-24 13:13:59Z

3

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>

edited Feb 24, 2018 at 13:13

answered Feb 24, 2018 at 12:56

Bless

5,4002 gold badges44 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

stone rock Over a year ago

It does not work it shows slot available for all days onclicking plus/minus button

stone rock Over a year ago

It shows only slots available for today even if I click on plus/minus buttons check this screenshot -> imgur.com/a/lYXR3

Bless Over a year ago

Think you meant the condition to be data_slots.length === 0 as data_slots is an array.

stone rock Over a year ago

Yes you have understood my problem but still getting error

Bless Over a year ago

Looks like a typo. date_slots, not data_slots. You can check that by logging the value of data.available_slots[this.state.counter].data_slots inside the render function (above the return statement). That would've returned undefined.

Collectives™ on Stack Overflow

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

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related