Downshift: *Id props not recognized by React

[abaracedo]

• downshift version: 3.4.5
• node version: 13
• npm (or yarn) version: 1.19.1

Relevant code or config

function Location() {
    return (
        <Downshift>
            {({
                getLabelProps,
                getInputProps,
                getMenuProps,
            }) => (
                <div className="autocomplete">
                    <div className="autocomplete__field">
                        <label
                            {...getLabelProps({
                                className: 'autocomplete__label',
                                labelId: 'location-label'
                            })}
                        >
                            Where are you?
                        </label>

                        <input
                            {...getInputProps({
                                className: 'autocomplete__input',
                                name: 'location',
                                inputId: 'location'
                            })}
                        />
                    </div>
                </div>
            )}
        </Downshift>
    )
}

What you did:
I have created an autocompletion component and when setting any *Id prop a warning (mentioned below) appers on the console.

What happened:

Warning: React does not recognize the labelId prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase labelid instead. If you accidentally passed it from a parent component, remove it from the DOM element.

Problem description:

Using any *Id props doesn't work and throws a warning in the console. The resulting html is this one and for the *Id props it adds and *id attribute to the element.

<div class="autocomplete__field">
    <label
       for="downshift-0-input" 
       id="downshift-0-label" 
       class="autocomplete__label"
       labelid="location-label"
   >Where are you?</label>

    <input 
       aria-autocomplete="list" 
       aria-labelledby="downshift-0-label" 
       autocomplete="off"
       id="downshift-0-input"
       class="autocomplete__input" 
       name="location" 
       inputid="location"
       value=""
   >
</div>

Suggested solution:

[silviuaavram]

@abaracedo the labelId is a Downshift prop. It should be used as

        <Downshift labelId="location-label">
            {({
                getLabelProps,
                getInputProps,
                getMenuProps,

Downshift will apply it afterwards on your <label>.

[abaracedo]

Great, thanks for resolving my issue. I don't know why I thought they were to use on the form elements.