Cuando hago clic en el botón Enviar, debería aparecer hour_slots y hour desde los datos JSON, pero cuando hago clic en el botón Enviar no se muestra nada. Estoy tratando de hacer uso de la función showslots() para mostrar el contenido HTML debajo del botón Enviar.

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

  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;

Cuando hago clic en el botón Enviar, debe mostrar los detalles de la ranura, pero no se muestra nada debajo del botón Enviar, ya que no se genera html dinámicamente debajo del botón Enviar. ver captura de pantalla: ingrese la descripción de la imagen aquí

2
water man 24 feb. 2018 a las 16:42

4 respuestas

La mejor respuesta

Encontré un error importante, en el siguiente código

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

Dentro de la función de mapa, pasa una función que no devuelve nada. El código correcto, para la misma sintaxis, sería:

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

Tenga en cuenta la declaración de devolución.

Si desea no tener la declaración return, simplemente reemplace el corchete alrededor de la definición de la función con los corchetes.

2
KapilDev Neupane 24 feb. 2018 a las 14:09

@ water-man, ¿puedes probar el siguiente código:

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;
0
salman.zare 24 feb. 2018 a las 14:27

Deberá tener una variable de estado adicional isSubmitted, configurada inicialmente en false para saber si se ha hecho clic en el botón Enviar. Al hacer clic en el botón Enviar, llame a una función para actualizar el valor de estado de isSubmitted a true.

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

Y cambie la función onClick del botón a setSubmitted.

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

Y llame al showslots() donde quiera que se muestre (junto con la condición para que las ranuras se muestren solo después de hacer clic en el botón Enviar), dentro del método de representación de esta manera:

{this.state.isSubmitted && this.showslots()}
1
Bless 24 feb. 2018 a las 14:04

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;
0
water man 24 feb. 2018 a las 14:27