How to render functions onclick submit button in ReactJs?

Question

When I click on submit button there should be displayed hour_slots and hour from the JSON data but when I click on submit button nothing is displayed. I am trying to make use of showslots() function to display HTML content below submit button.

datapicker.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}))
    }
  }

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

  showslots(){
        if(data.available_slots[this.state.counter].date_slots.length === 0){
            return(
                <p>No slots</p>
                )
        }else {
            return(

                    data.available_slots[this.state.counter].data_slots.map(obj =>{

                        <div id="slotinfo">
                            <p>Hour : {obj.hour}</p>
                            <p>Hour slots : {obj.hour_slots[0]}</p>
                            <p>Hour slots : {obj.hour_slots[0]}</p> 
                        </div>
                    })
                )
        }

  }

  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="status">
          { data.available_slots[this.state.counter].date_slots.length === 0 ? 
          <p>No slots available for today</p> : <p>Slots available for today</p> }
        </div>
        <div className="submit">
          <button type="button" className="btn btn-primary" id="submit" onClick={this.showslots.bind(this)}>Book Slot</button> 
        </div>
      </div>

      </div>
    );
  }
}

export default DatePicker;

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;

When I click on submit button it should display slot details but nothing is displayed below submit button as no html is generated dynamically below submit button. see screenshot:

You should call the function like below: onClick={this.showslots} — salman.zare
– salman.zare, Commented Feb 24, 2018 at 13:53

KapilDev Neupane · Accepted Answer · 2018-02-24 14:09:00Z

2

I found one major error, in the following code

                data.available_slots[this.state.counter].data_slots.map(obj =>{

                    <div id="slotinfo">
                        <p>Hour : {obj.hour}</p>
                        <p>Hour slots : {obj.hour_slots[0]}</p>
                        <p>Hour slots : {obj.hour_slots[0]}</p> 
                    </div>
                })

Inside the map function, you pass a function which does not returns anything. The correct code, for the same syntax, would be:

                data.available_slots[this.state.counter].data_slots.map(obj =>{
                    return (
                      <div id="slotinfo">
                        <p>Hour : {obj.hour}</p>
                        <p>Hour slots : {obj.hour_slots[0]}</p>
                        <p>Hour slots : {obj.hour_slots[0]}</p> 
                      </div>
                    );
                })

Please do notice the return statement.

If you would like to not have the return statement, just replace the curly bracket around the function definition with the round brackets.

answered Feb 24, 2018 at 14:09

KapilDev Neupane

5843 silver badges13 bronze badges

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

1 Comment

water man Over a year ago

@Kapli Why it is not displaying the content when slots are available it only displays no slots

Bless · Accepted Answer · 2018-02-24 14:04:57Z

1

You will need to have an additional state variable isSubmitted, initially set to false to know whether submit button has been clicked. On clicking submit button, call a function to update the state value of isSubmitted to true.

setSubmitted(){
  this.setState({ isSubmitted:true })
}

and change the onClick function of the button to setSubmitted.

<button type="button" className="btn btn-primary" id="submit" onClick={this.setSubmitted.bind(this)}>Book Slot</button>

And call showslots() wherever it should be displayed (along with the condition so that slots are displayed only after submit button has been clicked), inside the render method like so:

{this.state.isSubmitted && this.showslots()}

edited Feb 24, 2018 at 14:04

answered Feb 24, 2018 at 13:56

Bless

5,4002 gold badges44 silver badges46 bronze badges

5 Comments

water man Over a year ago

what changes should I make in my answer check above.

Bless Over a year ago

As KapilDev Neupane noted, you have missed a return statement. Otherwise looks fine. Do you see any errors? Also, in future, please update the question with the code and leave a comment on the answer that you've updated the question, if you need clarifications for an answer. Don't post as a new answer.

Bless Over a year ago

Also noticed a typo - date_slots, not data_slots.

water man Over a year ago

I am not getting the HTML content if the slot is avaliable why so ? see snapshot -> imgur.com/a/HTxoB For no slots it displays correctly but for slots avaliable it should display the content

Bless Over a year ago

You have missed a return statement inside the map in the else part of showslots() function. Check KapilDev Neupane's answer - stackoverflow.com/a/48963722/1421222

water man · Accepted Answer · 2018-02-24 14:27:08Z

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,
        issubmitted:false
     };
   }

  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}))
   }
  }

  formsubmitted(){
    this.setState({
        issubmitted:true
    })
  }

  showslots(){
        if(data.available_slots[this.state.counter].date_slots.length === 0){
            return(
                <p>No slots</p>
                )
        }else {
            return(

                    data.available_slots[this.state.counter].date_slots.map(obj =>{

                        return (
                  <div id="slotinfo">
                    <p>Hour : {obj.hour}</p>
                    <p>Hour slots : {obj.hour_slots[0]}</p>
                    <p>Hour slots : {obj.hour_slots[0]}</p> 
                  </div>
                );
                    })
                )
        }

  }

  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="status">
          { data.available_slots[this.state.counter].date_slots.length === 0 ? 
          <p>No slots available for today</p> : <p>Slots available for today</p> }
        </div>
        <div className="submit">
          <button type="button" className="btn btn-primary" id="submit" onClick={this.formsubmitted.bind(this)}>Book Slot</button> 
        </div>
      </div>

      <div>
        {this.state.issubmitted ? this.showslots() : <p>No slots</p>}
      </div>


      </div>
    );
  }
}

export default DatePicker;

salman.zare · Accepted Answer · 2018-02-24 14:27:35Z

@water-man , can you test the following code:

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

class DatePicker extends Component {

  constructor(props) {
    super(props);
    this.state = {
      counter: 0,
      data: data
    };
    this.showslots = this.showslots.bind(this);
  }

  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}))
    }
  }

  showslots() {
    const counter = this.state.counter;
    if (this.state.data.available_slots[counter].date_slots.length === 0) {
      return (
        <p>No slots</p>
      )
    } else {
      const counter = this.state.counter;
      const data_slots = this.state.data.available_slots[counter].date_slots;
      return (
        data_slots.map(obj => {
          return(
          <div id="slotinfo">
            <p>Hour : {obj.hour}</p>
            <p>Hour slots : {obj.hour_slots[0]}</p>
            <p>Hour slots : {obj.hour_slots[0]}</p>
          </div>
          )
        })
      )
    }

  }

  render() {
    console.log(data);
    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="status">
            { data.available_slots[this.state.counter].date_slots.length === 0 ?
              <p>No slots available for today</p> : <p>Slots available for today</p> }
          </div>
          <div className="submit">
            <button type="button" className="btn btn-primary" id="submit" onClick={this.showslots}>Book Slot</button>
          </div>
        </div>

      </div>
    );
  }
}

export default DatePicker;

Thanks Salman but I have solved it. I thing to mention in your answer as you are using map() we need to keep each<p> inside a new <div> tag.

Collectives™ on Stack Overflow

How to render functions onclick submit button in ReactJs?

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related