Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получена: undefined

Question

Я новичок, чтобы реагировать, поэтому, возможно, это будет глупо спрашивать.

Я пытаюсь добавить выберите вход на мою страницу, но получаю:

ncaught Инвариантные Нарушение: Тип элемента недействителен: ожидается строка (для встроенных компонентов) или класс/функция (для составные компоненты), но получил: undefined.

ncaught TypeError: Не удается прочитать свойство «__reactInternalInstance $ 1y5rcyzngdmlzew7wenq4zpvi» нулевых

Мой код:

import React from "react"; 
import {Input} from "react-bootstrap"; 

    render() { 
      return (
       <div className="pickup-site-filter-container"> 
        <span className="pickup-site-filter-label">Filter Locations by</span> 
        <span className="pickup-site-filter-zipCode">Zip Code: 
         <input className="filter-zipCode" type="text" pattern="[0-9]{5}" value={this.state.zipCode} 
           htmlFor="validation-error" ref="zipCode" onChange={this.onChangeZipCode}/> 
        </span> 
        <span className="pickup-site-filter-deliveryDay">Delivery Day: 
         <Input type="select" value="1" ref="valid_for"> 
          <option value="1">1 hour</option> 
          <option value="2">1 day</option> 
          <option value="2">5 days</option> 
         </Input> 
        </span> 
        <button className="pickup-site-filter-btn" onClick={this.filterClicked}>FILTER</button> 
       </div>) 
     } 

Это только рендер, потому что я обнаружил, что также отборное пример не работает

Answer 1

Вы пробовали использовать <select></select> вместо <input type="select" />?

Answer 2

Я изменил его, используя вместо и работал

createSelection() { 
     let days = []; 
     days.push(<option key={8} value="All" onChange={this.onChangeDeliveryDay}>All</option>); 
     if(this.props.deliveryDays) { 
      for (let i = 0; i <= this.props.deliveryDays.length; i++) { 
       days.push(<option key={i} value={this.props.deliveryDays[i]} onChange={this.onChangeDeliveryDay}>{this.props.deliveryDays[i]}</option>); 
      } 
     } 
     return days; 
    }, 
    render() { 
     return (
      <div className="pickup-site-filter-container"> 
       <span className="pickup-site-filter-label">Filter Locations by</span> 
       <span className="pickup-site-filter-zipCode">Zip Code: 
        <input className="filter-zipCode" type="text" pattern="[0-9]{5}" value={this.state.zipCode} 
          htmlFor="validation-error" ref="zipCode" onChange={this.onChangeZipCode}/> 
       </span> 
       <span className="pickup-site-filter-deliveryDay">Delivery Day: 
        <select value="1" ref="valid_for"> 
         {this.createSelection()} 
        </select> 
       </span> 
       <button className="pickup-site-filter-btn" onClick={this.filterClicked}>FILTER</button> 
      </div>) 
    }