Downshift: Warning: Prop `aria-labelledby` did not match. Server: "downshift-1-label" Client: "downshift-0-label"

[GuidovdRiet]

• downshift version: 3.1.0
• node version: 9.2.0
• npm (or yarn) version: 5.6.0

Relevant code or config

import React, { Component } from 'react';
import Downshift from 'downshift';
import Router, { withRouter } from 'next/router';

import withContext from '../../context/withContext';

class LangSwitcher extends Component {
  onChange(lang) {
    const {
      router: {
        query: { slug },
      },
    } = Router;
    Router.push(`/page?slug=${slug}&lang=${lang}`, `/${lang}/${slug}`);
  }

  render() {
    const {
      context: { languages },
      router: {
        query: { lang },
      },
    } = this.props;
    const [activeItem] = languages.filter(i => i.slug === lang);
    const activeIndex = languages.indexOf(activeItem);
    return (
      <Downshift
        items={languages}
        defaultSelectedItem={activeItem}
        defaultHighlightedIndex={activeIndex}
        onChange={this.onChange}
      >
        {({
          getToggleButtonProps,
          getItemProps,
          isOpen,
          highlightedIndex,
          selectedItem,
        }) => (
          <div>
            <button
              {...getToggleButtonProps()}
              aria-expanded={isOpen}
              aria-haspopup="true"
            >
              {selectedItem || lang}
            </button>
            {isOpen &&
              languages.map((language, index) => (
                <div
                  {...getItemProps({
                    key: language.slug,
                    item: language.slug,
                    style: {
                      backgroundColor:
                        highlightedIndex === index ? 'lightgray' : 'white',
                      fontWeight: selectedItem === language ? 'bold' : 'normal',
                    },
                  })}
                >
                  {language.slug}
                </div>
              ))}
          </div>
        )}
      </Downshift>
    );
  }
}

export default withContext(withRouter(LangSwitcher));

I'm using Next JS for SSR.

What happened:
I receive the following warning:

index.js:2178 Warning: Prop aria-labelledby did not match. Server: "downshift-1-label" Client: "downshift-0-label"

What could be the problem here?

[kentcdodds]

Hi @GuidovdRiet, if you're server rendering downshift, you need to provide an id prop that is the same on the server as it will be on the client:

...
     <Downshift
        id="lang-switcher"
        items={languages}
        defaultSelectedItem={activeItem}
        defaultHighlightedIndex={activeIndex}
        onChange={this.onChange}
      >
        {({
...

Good luck!

[mysterybear]

@kentcdodds and with the hooks API?

[fandiluo]

@mysterybear Try it!
useCombobox({ id: 'lang-switcher' })