react-select: How do I resolve “Warning: Prop `id` did not match”

Question

I have a web app with ReactJs and NextJs. In a functional component, I have used react-select then, I'm receiving the following console warning:

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

My code is the following:

import { Row, Col, Card, Form, Button } from 'react-bootstrap';
import Select from 'react-select';

const priorityOptions = [
  { value: 'p1', label: 'Top level - P1' },
  { value: 'p2', label: 'Mid level - P2' },
  { value: 'p3', label: 'Low level - P3' }
];
const PostView = () => {
  return (
    <div className="DashboardSla-ContentBody__Form">
      <Row>
        <Col md="10">
          <Card className="shadow-sm">
            <Card.Body>
              <Form>
                <h5 className="text-secondary mb-3">Booking details</h5>
                <Form.Group controlId="postType">
                  <Form.Label>Booking priority</Form.Label>
                  <Select 
                    id="postType"
                    placeholder="Make a selection"
                    options={priorityOptions}
                  />
                </Form.Group>
                <Button
                  type="submit"
                  variant="primary"
                >Add Booking</Button>
              </Form>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </div>
  )
}

export default PostView;

Have you tried to set the `instanceId`? See here: https://react-select.com/props and https://github.com/JedWatson/react-select/issues/2629 — David, Apr 18 '20 at 15:52
I have replaced `id="postType"` as `instanceId="postType"`. Still showing error in console. — Sonjoy Datta, Apr 19 '20 at 05:11
Did you ever figure this one out? I think it has something to do with rehydration of an SSR React app but not sure how to solve that. — serraosays, Jul 03 '20 at 22:15

score 144 · Accepted Answer · answered Jul 26 '20 at 22:07

144

try to add prop instanceId set as unique string and should work

answered Jul 26 '20 at 22:07

xargr

2,788
1
19
28

5

tested on react-select using Next.js, it works no more warning. Thanks! – winadiw Oct 05 '20 at 13:16
5

I'm working with Next.js an with react-select and it works to me, thanks. – Raul Jan 21 '21 at 11:37
Hey, I've just tested it and it works! Thanks! – oriol.puig May 26 '21 at 16:03
2

FYI - capitalisation counts. I couldn't twig to this until I finally realised i had instanceid not instanceId – gorlaz Apr 25 '22 at 22:20
1

FYI - if you are getting this error working with next.js and "@fortawesome/react-fontawesome", the property to use is titleId. – user3174311 May 20 '22 at 13:20
Thanks man, I finally got rid of the warning – Prabodh Sep 27 '22 at 06:04
Where did i go wrong? Setting `instanceId` helped to get rid of `id` prop warning. But now I have similar issue: `Warning: Prop \`className\` did not match` – acidernt Feb 18 '23 at 13:51

score 25 · Answer 2 · answered Jul 26 '22 at 04:38

React 18 introduces a useId hook for generating an ID that is hydration-safe (stable across client and server renders) but still globally unique. You can use it to solve this problem. I use the following component in place of Select:

import React, { useId } from 'react';
import Select from 'react-select';

export default function StableSelect({ ...props }) {
  return <Select {...props} instanceId={useId()} />;
}

You can use this component exactly like Select, but it won’t raise any hydration errors since its ID is stable.

Worked for me on latest next/react installs – Mike Bourbeau Sep 08 '22 at 17:49 — Mike Bourbeau, Sep 08 '22 at 17:49

score 15 · Answer 3 · answered Jul 06 '21 at 11:33

15

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 :)

answered Jul 06 '21 at 11:33

Smit Desai

161
1
2

score 1 · Answer 4 · answered Jul 15 '22 at 17:54

1

<Select
  className={className}
  name={field.name}
  id="long-value-select"
  instanceId="long-value-select"
  value={getValue()}
  onChange={onChange}
  placeholder={placeholder}
  options={options}
  isMulti={isMulti}
/>

answered Jul 15 '22 at 17:54

wap institute

11
2

2

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer). While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Saeed Zhiany Jul 17 '22 at 03:50

score 0 · Answer 5 · answered Jan 29 '23 at 12:25

0

Instanceid should be any string in react select props it will definitely work...

instanceId = "select-box"

answered Jan 29 '23 at 12:25

yuvraj sune

191
1
2

react-select: How do I resolve “Warning: Prop `id` did not match”

5 Answers5