How to use DataSearch as controlled component from Reactivesearch?

Question

I'm new to ReactiveSearch library, and I implemented the DataSearch component with autosuggestion as my in-site SearchBar. I added value and onChange to in order to store the input value as a state, but as soon as I added the value prop, I can't type in the search bar any more. What's wrong?

I also want to know what kind of callback function can I use when I click one of the suggestions to trigger some event, I tried onClick , but it didn't work. Here is my code, any help is appreciated!

import * as React from 'react';
import {
  ReactiveBase,
  DataSearch,
} from '@appbaseio/reactivesearch';

import './SearchBar.scss';

export default class SearchBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = { searchTerm: '' };
  }

  handleInputChange = (event) => {
    this.setState({ searchTerm: event.target.value });
  };

  handleSearch = () => {
  // do something...
  };

  public render() {
    return (
      <React.Fragment>
        <ReactiveBase
          app="rooms,floors,assets"
          url="http://localhost:9200"
          headers={{
            'Access-Control-Allow-Origin': '*'
          }}
          style={{ display: 'inline' }}
        >
          <DataSearch
            componentId="SearchRoom"
            dataField={['roomName', 'roomNumber', 'floorName', 'assetName']}
            placeholder="Search for rooms or assets"
            style={{ width: 500, display: 'inline-block' }}
            fuzziness={1}
            value={this.state.searchTerm}
            onChange={this.handleInputChange}
            //how to trigger handleSearch when I click one of the suggestions?
          />
        </ReactiveBase>
      </React.Fragment>
    );
  }
}

Answer 1

onChange returns the updated value it does not return a Synthetic Event . I have updated the Demo of DataSearch component from the docs to use controlled behavior.

I have also added a callback which would get called when you select any suggestion. You can make use of downShiftProps to achieve this.

Check the app here . You can also read more about this props here .

Hope this helps!