Search a result in next page reactjs

Question

I am having a search bar in my component. I want on click of search, it should call the search action and navigate the result to the parent component.

 <input 
              onKeyPress={(event) => {
             if (event.key === "Enter") {
                  this.onSearch(event.target.value);
                }
              }}
              type="text"
            />

Method:

 onSearch(searchString) {
     // perform Search
     this.props.history.push("/details");
  } 

I want it to navigate to a details page with the search String, in URL I am expecting something like: http://localhost:8080/details?search="searchString".

Can anyone help me with this?

Answer 1

You could do this

onSearch(searchString) {
  // perform Search
  this.props.history.push("/details?search=" + encodeURIComponent(searchString));
}

Hope this helps.