Best way to render differently each sections?

[mthuret]

Let's say you have several sections for your autocomplete, but the rendering of each one is completely different. What would be the best way to provide different component depending on the section?

Right now the signature of renderSuggestion is function renderSuggestion(suggestion, { query }), so it means that your rendering needs to be based on the content of the suggestion to decide how to render. Is there another way to handle this?

[moroshko]

I'd just add the section info to each suggestion, and use it in renderSuggestion, e.g.:

const suggestions = [
  {
    text: 'France',
    sectionType: 'country'
  },
  {
    text: 'Watermelon',
    sectionType: 'fruit'
  }
];

renderSuggestion(suggestion) {
  switch (suggestion.sectionType) {
    case 'country': return <Country name={suggestion.text} />;
    case 'fruit': return <Fruit name={suggestion.text} />;
  }
}

Does this help?

[mthuret]

Alright so each suggestion should contain their sectionType.

Thanks!

[olance]

I'd vote for reopening this issue, for the following reason: even though it's not too complicated to add sectionType to your data, when this data directly comes from an API call result, it forces you to enrich that data if you need to know which section a suggestion belongs to.

For instance, I have to do this:

getSectionSuggestions={section => (hits) => hits.map(h => {
        h.section = section;
        return h;
})}

Which is a bit cumbersome, when the signature of renderSuggestion could simply be function renderSuggestion(suggestion, { query, section }).

Would that be a change you'd consider?

Thanks!

[olance]

If I may add, the same issue is found with renderSuggestionsContainer: there's no information about which section the container should be rendered for, which makes it hard to customize a specific section.

[moroshko]

@olance OK, this makes sense!

Would you like to contribute a PR? (Note it will conflict with #384)

[moroshko]

I'm not sure I understand the issue with renderSuggestionsContainer. The children you get in this function are already rendered using renderSuggestion. So, if we add section to renderSuggestion, wouldn't this be enough?

[olance]

@moroshko Yeah, actually I misunderstood the purpose of the function... it might be nice to have a renderSectionContainer callback as well when you need to customise specific sections... but that's another story! :)

I'm open to sending a PR but I'm short of bandwidth at the moment 😕
I'll note that down for later!

[asogani1]

can someone help me how can I render unique elements in render sugestions?
consider default example and suppose there are two languages c in array?
how can we render only one 'c' if there are multiples?

[ulrichb]

+1 for a new renderSectionContainer (which has the responsibility to render the children, like renderSuggestionsContainer).

@moroshko Would you accept a PR for this principally?

[yoadsn]

@ulrichb Have been hacking around this for a while now. If @moroshko is open for that change I can try and help with a PR.
My (not sufficient) workaround was to do some CSS-foo and leverage the sectionContainerFirst theme element to apply a different structure to the first section. I then made sure my "specially rendered" section is always first. when it's missing, I omit this prop from the theme manually before rendering. yeah, I know... I now have two specially rendered sections. Busted.
Hopefully, I miss something and there a simpler way.

[OliverJAsh]

PR that adds renderSectionContainer: #789