Label must have associated control

Question

There is a div with some elements in it and I want to add a label to it.

This is the original:

<div className="upload-image">                   
  <input
    name="image"
    id="image-input"
    accept="image/*"
    onChange={this.doSomething}
    multiple
    type="file"
    className="myClass"
  />
  <span className="upload-image-label">
    <Icon name="image outline" />
    drop the image here
  </span>
</div>

after the label is added:

<div className="upload-image">
    <label htmlFor="image-input">Add image</label> //this line is added
        <input
           name="image"
           id="image-input"
           accept="image/*"
           onChange={this.doSomething}
           multiple
           type="file"
           className="myClass"
         />
        <span className="upload-image-label">
            <Icon name="image outline" />
             drop the image here
       </span>
</div>

Initially it was for instead of htmlFor but React said it is an unknown property.

Now, the error says:

A form label must be associated with a control

Any suggestions?

Answer 1

Place the input inside the label.

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.

Source: W3.org, Forms in HTML document - 17.9 Labels

Answer 2

I know that the question has been asked a while ago. Still I face this error message. I thought I share the result by which I was able to solve my problem.

Make sure that the label has htmlFor. the htmlFor that you mentioned for the label should be the id of the input field. Wrap the input field inside the opening and the closing tags of the label.

This is how the label and input field code should look like:

<label className="list-group-item" htmlFor="first-checkbox">
  <input
    className="form-check-input me-1"
    type="checkbox"
    value=""
    id="first-checkbox"
  />
  First checkbox
</label>;