React InstantSearch V5 / Bootstrap V4 grids: Auto generated tags are obstructing my grids

Hi there,
I have a little issue since upgrading from react-instantsearch V4 to V5.
I am using Bootstrap 4 which now requires to wrap a col class directly within a row class.

In V4 I was able to wrap my hits with the necessary classes within my render method by adding custom classes.
However, in V5 it seems that components are generating further divs in between:

<Hits hitComponent={Hit} className="row"/>
Produces:

<div class="ais-Hits row">
  <ul class="ais-Hits-list"> // Auto generated
    <li class="ais-Hits-item"> // Auto generated
      <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-4"> // Set in my returned in my Hit, was previsously bellow the "ais-Hits-row" class
...

As you can see the β€œrow” class is not wrapping the right div.
I am wondering how to include the correct class in the ul tag, or get rid of the auto-generated ul tag.

I am lost right now. Thanks a lot in advance!!!

To have complete control over which DOM something renders to, you can have access to the connectors (specifically connectHits here).

This is an example with the classes you mentioned:

Nice!
Thank you very much this is really helpful!

1 Like