Solvedreact select [V2] Warning: Prop id did not match.

Getting this error in console.

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

21 Answers

✔️Accepted Answer

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

Other Answers:

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}
			/>

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

Select component needs an instanceId, id mandatory
So Just add

id="long-value-select"
instanceId="long-value-select"

to your Select component it will remove the Warning :)

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.