React-select: [V2] Warning: Prop `id` did not match.

[andyr7]

Getting this error in console.

Warning: Prop id did not match. Server: "react-select-5-input" Client: "react-select-2-input"

[gwyneplaine]

@andreyrodionov please use the id prop on the select. By default if no id is defined, we increment an instancePrefix as a global variable (i.e. react-select-1, react-select-2). We do this to ensure that if you have multiple selects on the same page, they aren't all referenced by the same Id.

[KidkArolis]

I think it's instanceId prop, not id prop?

[andyr7]

Yes, the id prop is set up, but I still got this warning.

[gwyneplaine]

apologies @KidkArolis is correct, please set the instanceId prop @andreyrodionov

[jjm340]

I used the instanceId property and I'm still getting this same issue with v1.2.1

[kovachwt]

I have the same issue with AsyncSelect with version 2.0.0.
Added an instanceId and an id, it does not help, the error is still there.

[nisargrthakkar]

I'm getting this same issue

[jjm340]

@gwyneplaine Should we open a new issue?

[nolandg]

Well I got it to work fine with no warning once I added instanceId but this reliance on a unique ID makes this component difficult to integrate with an SSR app. If internally it increments a counter to automatically add an ID, that counter needs to be forcibly reset on every render of the app and this does not appear to be happening. Is there a way to achieve this?

Use case: I render the app on the server at least twice to properly extract all the data each component needs to render, eg. GraphQL and Apollo's getDataFromTree function. When I render the app twice on the server and once on the client, all the react-select id's are off and warnings are generated and my React rehydration is inefficient.

There needs to be a way to tell react-select "do not increment ID's, I'm just pre-rendering you" or to reset the counter.

[nolandg]

As a workaround, I think I'll need to create my own SSR-aware React context and manage the react-select IDs myself.

Or does someone have a suggestion on how I could implement this within react-select?

[pawel2105]

instanceId as a prop works for me when the component is itself receiving a prop called id and using that value as the value for instanceId.

[bkyam]

I'm building out a site with Nextjs, and found that passing inputId fixed the issue.

<Select
                id={this.props.id}
                instanceId={this.props.instanceId}
                inputId={this.props.instanceId}
                defaultValue={this.props.options[`${this.props.defaultValue}`]}
                isDisabled={this.props.isDisabled}
                isFocused={this.props.isFocused}
                isSelected={this.props.isSelected}
                onChange={this.handleChange}
                name={this.props.name}
                options={this.props.options}
                menuPlacement='auto'
                components={{ DropdownIndicator }}
                styles={theme == 'dark' ? darkStyle : lightStyle}
            />

[onukselcuk]

This is so annoying all Select components need 3 ids.

1. id
2. instanceId
3. inputId

[pom421]

id and instanceId was enough to remove the warning in my case (Next.js 9.5)

[viniciusdacal]

could seem like a stupid question, but why is id needed in react-select? This is probably the first time I see Id being required or even used in a react-lib to be fair. Is that really necessary for the lib internals, could we use something else instead?