Getting [object object] in spfx search box value

Question

I am working on spfx webpart which will send search value to url and append to show the results in enterprise search below is my code but every time i enter search value it always return [object object] like _layouts/15/search.aspx?q=[object%20Object]

import * as React from 'react';
import { IReactSearchBoxProps } from './IReactSearchBoxProps';
import { IReactSearchBoxState } from './IReactSearchBoxState';
import { Button } from 'office-ui-fabric-react/lib/Button';
import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';

declare const window: any;

export default class ReactSearchBox extends React.Component<IReactSearchBoxProps, IReactSearchBoxState> {

  /**
   * Search results page uri.
   */
  public ResultsPageUri: string;

  constructor(props: IReactSearchBoxProps) {
    super(props);

    this.state = {
      searchQuery: ""
    } as IReactSearchBoxState;
  }

  public render(): React.ReactElement<IReactSearchBoxProps> {
    return (
      <div className="ms-Grid">
        <div className="ms-Grid-row">
          <div className="ms-Grid-col ms-u-sm10">
            <SearchBox
              className="react-search-box"
              onChange={this._handleInputChange.bind(this)}
              onSearch={this._handleSearch.bind(this)}>
              
            </SearchBox>
          </div>
          <div className="ms-Grid-col ms-u-sm2">
            <Button id="SearchButton" onClick={this._handleSearch.bind(this)}>
              {this.props.customSearchLabel}
            </Button>
          </div>
        </div>
      </div>
    );
  }

  /**
   * Search button event handler.
   * @param event 
   */
  private _handleSearch(event: any): void {

    // if a page is specified in the search page results url property 
    // then use it instead of the enterprise search results page.
    if (this.props.searchResultsPageUrl) {

      this.ResultsPageUri = this.props.searchResultsPageUrl;

    } else {

      // defaults to the enterprise search results page.
      this.ResultsPageUri = `${this.props.tenantUrl}/_layouts/15/search.aspx`;
      
    }

    // append the query string to the url.
    this.ResultsPageUri += `?q=${this.state.searchQuery}`;
    this._redirect();
  }

  /**
   * Redirects to the results page. 
   * windows.location wrapper so stub can be created in the unit tests.
   */
  private _redirect(): void {

    window.location = this.ResultsPageUri;
  }

  /**
   * Search input handler.a
   * @param searchQuery
   */
  private _handleInputChange(searchQuery: string): void {

    this.setState((prevState: IReactSearchBoxState, props: IReactSearchBoxProps): IReactSearchBoxState => {
      prevState.searchQuery = searchQuery;
      return prevState;
    
    });
  }
}

Answer 1

The issue appears to be with how you are setting state in the _handleInputChange method. Try simplifying it to the following:

  private _handleInputChange(query: string): void {

    this.setState({searchQuery:query});
  }

You would use this approach even if you have multiple state properties. React will take care of putting them together.