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) {

    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">
          <div className="ms-Grid-col ms-u-sm2">
            <Button id="SearchButton" onClick={this._handleSearch.bind(this)}>

   * 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}`;

   * 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;

1 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 {


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.