Search form within the Results page - ReactJs

Question

I am trying to build a simple search app with this flow:

1 - The Search Page has a SearchBar and a list with all the elements below it.

2 - When searching for a word(filtered by Query) within the Search Page this should redirect you to the Results Page.

3 - The Results Page has a SearchBar if you want to look for a different word and the results listed below.

Error: When searching for a different word (eg.AB instead of AA) I get an error Cannot read property 'results' of undefined and I don't know how to fix it. https://codesandbox.io/s/damp-cloud-k0poc?file=/src/data.js:96-101

I based the app on the following examples:

1 - ReactJS - Pass props with Redirect component

2 - Redirecting from a search form to a results page in reactjs

Any ideas will be much appreciated.

Answer 1

event.preventDefault() should fix your issue.

In your SearchBar.js add event.preventDefault(); in submit method to stop the app from reloading.

submit = (event) => {
    event.preventDefault();
    ...........
    ...........
    ...........
  };