rate.js

export class HomePage extends React.Component {
    
    constructor(props) {
      super(props);
      this.handleChanged = () => {
        console.log('hello world');
      }
      console.log('=-==>', this.handleChanged);
    }

    displayOption(option, index) {
      return option.name.common;
    }

    //handleChanged() {
      //console.log('Hello world');
      //[>return _.debounce((e) => {<]
          ////console.log('handleChanged', e.target.value);
          ////console.log(this.onChangeNumberOrLocation(e.target.value));
        //[>}, 800);<]
    //}

    // DIGITS HANDLER
    handleChange(e) {
      e.persist();
      this.handleChanged(e);

      //console.log(' HELLO WORLD ====>', e.target.value );
    }
    
    // COUNTRY SELECTION HANDLER
    onOptionSelected(e) {
      console.log('====>',    e, this.ref);
      document.getElementById("namedInput").focus();
    }

    render() {
    let mainContent = null;

    // Show a loading indicator when we're loading
    if (this.props.loading) {
      mainContent = (<List component={LoadingIndicator} />);

    // Show an error if there is one
    } else if (this.props.error !== false) {
      const ErrorComponent = () => (
        <ListItem item={'Something went wrong, please try again!!'} />
      );
      /*const testProps = {*/
        //cost: 10,
        //description: 'Vancouver',
        //prefix: '1778'
      /*}*/
      const testProps = [
      {key: "17781", kosmosRate: 9},
      {key: "17782", kosmosRate: 9},
      {key: "17783", kosmosRate: 9},
      {key: "17784", kosmosRate: 9},
      {key: "17785", kosmosRate: 9}
      ]
      //mainContent = (<List component={ErrorComponent} />);
      mainContent = (<RateItem item={testProps} />);

    // If we're not loading, don't have an error and there are repos, show the repos
    } else if (this.props.repos !== false) {
      mainContent = (<List items={this.props.repos} component={RepoListItem} />);
    }


    return (
      <article>
        <div>
          <section className={styles.textSection}>
            <FormGroup
              controlId="formBasicText"
            >
            <input type="text" id="namedInput" value="" className={styles.hideMe} />
           <Typeahead
              customClasses={{
                input: 'form-control',
                results: styles.results,
                listItem: styles.listItem,
                hover: styles.hover
              }}
              ref="namedInput"
              onOptionSelected={this.onOptionSelected}
              className={styles.typeAhead}
              options={countries}
              maxVisible={2}
              displayOption={this.displayOption}
              filterOption="fullName"
              onChange={this.handleChange}
            />
            </FormGroup>
            {mainContent}
          </section>
          <Img className={styles.logo} src={Banner} alt="Kosmos Mobile - Logo" />
        </div>
      </article>
    );
  }
}