警告：React.createElement：在组件中使用组件时类型无效

Question

Okay I have an issue which has stumped me for hours now and I cannot for the life of me see what the issue is.

This is happening because of renderGuestOptions being used as a component in renderGuestPrices. The odd thing is if I change it from being an arrow function to a normal function() {} then it works, but then I cannot access 'this' to update the state.

I'm only using React and ReactDOM and I'm not using any exports or as such.

Error Text: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

import React from 'react';
import ReactDOM from 'react-dom'
class TimeSlots extends React.Component {
constructor(props) {
    super(props);
    this.telephone = getCalendarWrapper().dataset.telephone;
    // this.timeSlotButtons = React.createRef();
    // this.monthPrevious = React.createRef();
    // this.monthPreviousByYear = React.createRef();
    // this.monthForward = React.createRef();
    // this.monthForwardByYear = React.createRef();
    this.state = {
        currentDate: this.props.currentDate,
        timesAvailable: this.props.timesAvailable,
        guests: null,
        guestsSelected: null,
        timeSlotSelected: null,
        bookingModal: {
            show: false
        },
    }

    console.log(this.props.roomSlug);
    console.log(this.props.currentDate);
    console.log(this.props.timesAvailable);
}
// -----------------
// -- RENDERS GUEST OPTIONS WHEN USER HAS CLICKED A TIME SLOT
// -----------------
renderGuestOptions = (props) => {
// renderGuestOptions(props) {
    // const guestDataTest = props.guestData.guestData;
    const guestData = props.guestData;
    console.log(this);

    if (guestData) {
        return(
            // onChange we update the guestSelected state, which will then be used in the ajax request if its added
            <select className="form-control" onChange={(event) => console.log(event.target.value)}>
            {/* <select className="form-control" onChange={(event) => this.setState({guestsSelected: event.target.value})}> */}
                {Object.keys(guestData).map(function(key) {
                    return <option key={key} value={key}>{key} People - £{guestData[key]}</option>
                })}
            </select>
        );
    } else {
        return <h2>Sorry no times are available</h2>;
    }
}

renderGuestPrices = () => {
    if (!this.state.timeSlotSelected && !this.state.guests) {
        return <div></div>;
    }

    return(
        <form className="timeslot row" onSubmit={this.formSubmitHandler}>
            <div className="col-12 mb-3 text-center">
                <span className="title title--h2">How Many Guests?</span>
            </div>
            <div className="col-12 mb-3 mb-md-4">
                <this.renderGuestOptions guestData={this.state.guests} />
            </div>
            <div className="col-12 text-center mb-3 mb-md-4">
                <div className="room-calendar__timeslots__help">

                    <a href={"tel:" + this.telephone.replace(/ /g, '')}><i className="fa fa-phone"></i> {this.telephone}</a>
                </div>
            </div>
            <div className="col-12">
                <div className="d-block px-4">
                    <button className="btn d-block w-100 mb-3" type="submit">Add To Basket</button>
                    {/* <span className="btn d-block mb-3" onClick={() => this.addToBasketHandler()}>Add To Basket</span> */}
                    <button className="btn d-block w-100" type="submit">Book and Pay</button>
                </div>
                {/* <span className="btn">Book and Pay</span> */}
            </div>
            <div className="col-12">

            </div>
            <div className="room-calendar__timeslots__please-note col-12 text-center mt-4">
                <p className="text-uppercase text-">Please note - adding to basket will redirect you to the locations page</p>
            </div>
        </form>
    );
}
}

Answer 1

try to do something like this:

import ReactDOM from 'react-dom';
export default class TimeSlots extends React.Component {
  constructor(props) {
    super(props);
    this.telephone = getCalendarWrapper().dataset.telephone;
    // this.timeSlotButtons = React.createRef();
    // this.monthPrevious = React.createRef();
    // this.monthPreviousByYear = React.createRef();
    // this.monthForward = React.createRef();
    // this.monthForwardByYear = React.createRef();
    this.state = {
      currentDate: this.props.currentDate,
      timesAvailable: this.props.timesAvailable,
      guests: null,
      guestsSelected: null,
      timeSlotSelected: null,
      bookingModal: {
        show: false
      }
    };

    console.log(this.props.roomSlug);
    console.log(this.props.currentDate);
    console.log(this.props.timesAvailable);
  }
  // -----------------
  // -- RENDERS GUEST OPTIONS WHEN USER HAS CLICKED A TIME SLOT
  // -----------------
  renderGuestOptions() {
    // renderGuestOptions(props) {
    // const guestDataTest = props.guestData.guestData;
    const guestData = this.props.guestData;
    console.log(this);

    if (guestData) {
      return (
        // onChange we update the guestSelected state, which will then be used in the ajax request if its added
        <select
          className="form-control"
          onChange={event => console.log(event.target.value)}
        >
          {/* <select className="form-control" onChange={(event) => this.setState({guestsSelected: event.target.value})}> */}
          {Object.keys(guestData).map(function(key) {
            return (
              <option key={key} value={key}>
                {key} People - £{guestData[key]}
              </option>
            );
          })}
        </select>
      );
    } else {
      return <h2>Sorry no times are available</h2>;
    }
  };

  renderGuestPrices() {
    if (!this.state.timeSlotSelected && !this.state.guests) {
      return <div></div>;
    }

    return (
      <form className="timeslot row" onSubmit={this.formSubmitHandler}>
        <div className="col-12 mb-3 text-center">
          <span className="title title--h2">How Many Guests?</span>
        </div>
        <div className="col-12 mb-3 mb-md-4">
          <renderGuestOptions guestData={this.state.guests} />
        </div>
        <div className="col-12 text-center mb-3 mb-md-4">
          <div className="room-calendar__timeslots__help">
            <a href={'tel:' + this.telephone.replace(/ /g, '')}>
              <i className="fa fa-phone"></i> {this.telephone}
            </a>
          </div>
        </div>
        <div className="col-12">
          <div className="d-block px-4">
            <button className="btn d-block w-100 mb-3" type="submit">
              Add To Basket
            </button>
            {/* <span className="btn d-block mb-3" onClick={() => this.addToBasketHandler()}>Add To Basket</span> */}
            <button className="btn d-block w-100" type="submit">
              Book and Pay
            </button>
          </div>
          {/* <span className="btn">Book and Pay</span> */}
        </div>
        <div className="col-12"></div>
        <div className="room-calendar__timeslots__please-note col-12 text-center mt-4">
          <p className="text-uppercase text-">
            Please note - adding to basket will redirect you to the locations
            page
          </p>
        </div>
      </form>
    );
  };

  render() {
    return <renderGuestPrices />;
  }
}