One Search Box:results from different engines in two different tabs

Continuing the discussion from How to implement proximity search in app search:

I am trying to get this to work but am struggling to convert the pseudo code into working code.

Are you able to explain this some more, for a react newbie?

Pseudocode from How to implement proximity search in app search

state = {
  engine: 'engine1'
const connector = new AppSearchAPIConnector({
    searchKey: "",
    engineName: this.state.engineName,
    hostIdentifier: ""

return  <SearchProvider
      apiConnector: connector
        <SearchBox />
           <Tab1 id="tab1" onClick={() => setState({ engine: 'engine1' })}/>
          <Tab2 id="tab1" onClick={() => setState({ engine: 'engine2' })}/>

@georgina I put together a quick demo of this:

This is just a starting point. I think it may be a challenge to get that to work well.

If you can, I'd recommend an alternative approach. I recommend putting all of your documents into a single engine. Use a "type" field for the type of document, rather than putting them into separate engines.

You can then create a "facet" for type, and build your tabs from that "facet". This is the approach we take on and it works nicely:

Hope that helps,