How to pass reference to connectRefinementList child?

[rvieceli]

I'm using in react-native, and in my situation I need to implement two RefinementList in the same modal.

Our items have some facet (searchable) attributes. two fixed (e.g Category), when I click in category I open a modal with all categories to refine. But in our case, and make sense in a mobile, we have a apply button to apply all selected categories in one shot and it's working (only calling refine when click in apply passing refined categories controlled by me).

But for we have another attributes (more 2) that I need to group in only one modal and when I click in apply from modal, call refine in each RefinementList child and a SortBy.

//search
<RefinementCategoryModal attribute="categories" /> //here is a modal for only one, works fine
<RefinementSomeModal /> // here is a modal with two

//RefinementSome

const oneRef = createRef()
const twoRef = createRef()

<Modal>
  <RefinementOne attribute="one" ref={oneRef} /> //only flatlist with custom selection (useState)
  <RefinementTwo attribute="two" ref={twoRef} /> //only flatlist with custom selection (useState)
  <ApplyButton onPress={() => {
    oneRef.current.handleApply()
    twoRef.current.handleApply()
    //close modal
  }}/>
<Modal/>

in all my refinements I have the same thing

export default connectRefinementList(RefinementCategory)

If a pass ref to connected container I got this message

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?%s%s, 

I spend some time to use forwardRef but without success, looks like connectRefinementList is blocking to pass ref.

How to pass reference to connectRefinementList child?

Thank you

[francoischalifour]

Hey @rvieceli—how did you try using forwardRef? Any code snippets to share with us?

I would solve this problem differently, by switching React InstantSearch to "Controlled mode". This is possible by providing a state variable to InstantSearch#searchState.

Then the refinement components would manage a draft search state that gets committed to the global search state when the button is clicked:

function FiltersModal({ setSearchState }) {
  const draftSearchState = useRef({});

  return (
    <Modal>
      <RefinementOne
        attribute="one"
        onRefine={(values) => {
          /* add values to `draftSearchState` */
        }}
      />
      <RefinementOne
        attribute="two"
        onRefine={(values) => {
          /* add values to `draftSearchState` */
        }}
      />

      <ApplyButton
        onPress={() => {
          setSearchState((searchState) => ({
            /* merge `searchState` with `draftSearchState.current` */
          }));

          // close modal
        }}
      />
    </Modal>
  );
}

You can learn more about Controlled React InstantSearch in our routing guides.

[rvieceli]

Hi @francoischalifour I tried same example from google/stackoverflow without success. I don't have a code that can works :(

I got your idea. I will test it. Thank you

[sarahdayan]

Hey @rvieceli, did you end up solving your issue?

I'll close this ticket since there's a solution in the thread and in #3126, which is solved. Feel free to reopen if needed.