Creating onClick event for datalist option in React

I created a Twitch API widget which you can see here: https://twitch-react-drhectapus.herokuapp.com/

For now, anytime you are looking for something, there will be a list of suggestions. I would like to make it so that when I click on one of the datalist parameters, it will search for that user instead of clicking the Search button. Basically the same search function as google.

How should I implement this?

code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchUser, fetchSuggestions } from '../actions/index';

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      term: ''
    };
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(event) {
    this.setState({
      term: event.target.value
    });
  setTimeout( this.props.fetchSuggestions(event.target.value), 300);
  }

  renderSuggestions(sug, i) {
    return (
      <option key={i} value={sug.display_name} />
    )
  }

  onFormSubmit(event) {
    event.preventDefault();
    this.props.fetchUser(this.state.term);
    this.setState({
      term: ''
    });
  }

  render() {
    const { error, suggestions } = this.props;
    return (

        <form
          className='input-group'
          onSubmit={this.onFormSubmit}>
          <input
            className='form-control'
            placeholder='Search for a Twitch user'
            value={this.state.term}
            onChange={this.onInputChange}
            list='suggestions' />
          <span className='input-group-btn'>
            <button className='btn btn-primary'>
              Search
            </button>
          </span>
          <datalist id='suggestions'>
            {suggestions.map(this.renderSuggestions)}
          </datalist>
        </form>


        // {/* {error && <div className='alert alert-danger'>{error}</div>} */}


    )
  }
}

function mapStateToProps({ error, suggestions }) {
  return { error, suggestions };
}

export default connect(mapStateToProps, { fetchUser, fetchSuggestions })(SearchBar);

      

+3
search reactjs datalist


source to share


No one has answered this question yet

See similar questions:

520
Understanding Unique Keys for Array Children in React.js
8
Take action when clicking datist HTML5 option
1
Determine if element was selected from HTML 5 datalist by hitting enter key

or similar:

1203
Navigate programmatically with responsive router
1094
Loop inside React JSX
724
What are these three points doing in Reacting?
586
What is the difference between React Native and React?
583
Can you get the React component to restart without calling setState?
568
What is the difference between using a constructor and getInitialState in React / React Native?
547
React js onClick cannot pass value to method
438
Show or hide an element in the reactor
266
React JSX: selecting "selected" for the selected <select>
251
React Router with optional path parameter



All Articles
Loading...
X
Show
Funny
Dev
Pics