ReactJS - условный рендеринг с тернарным оператором - InvalidValueError - PullRequest
Новая
       6

ReactJS - условный рендеринг с тернарным оператором - InvalidValueError

0 голосов
/ 26 ноября 2018

Я создаю веб-приложение с ReactJS, на домашней странице я использую троичный оператор два рендеринга двух разных фрагментов в соответствии с состоянием (если истина или ложь).

мой код выглядит так: 

import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'

class Home extends Component {
  state = {
    citySearch : false
  }

    render(){

      return (
        <div className="home-main">

        { !this.state.citySearch ? (
          <Fragment>
            <h2 className="home-heading">Search Cafés from your</h2>
            <div className="home-buttons">
              <button className="home-buttons">Near You</button>
              <span>or</span>
              <button onClick={this.ActivateCitySearch} className="home-buttons">City</button>
            </div>
          </Fragment>
        )
          : (
            <Fragment>
              <h2 className="home-heading">Search Cafés from your</h2>
              <input className="search-café" placeholder="Enter your location"/>
              <Link className="search-input"><i className="fas fa-search"></i></Link>
            </Fragment>
          )
        }

        </div>
        )
    }
}

export default Home

Код работает, но я получаю следующее в консоли

InvalidValueError: не экземпляр HTMLInputElement

Кто-нибудь знает, как получитьизбавиться от этой ошибки ??

Спасибо,

J

...