Reusable React checkbox component with image without ID

Question

I'm trying to make a reusable React component for a checkbox.

Now, I know what a standard image-replacement for a checkbox looks like, so here it is in my React project:

import React, { Component } from 'react';

class Checkbox extends Component {
  render() {
    return (
      <div className="checkbox">
        <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text}
      </div>
    );
  }
}

export default Checkbox;

And here's the general CSS:

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: url("checked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}
input[type=checkbox]:checked + label {
  background: url("unchecked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}

Now, because this is React, I want to be able to reuse this component. But, I can't reuse an ID. What should I do to make a checkbox with an image replacing the native checkbox? Is there a way to do this without this "label" method? I'd prefer to not use a random number as the ID, or something along those lines.

@AndrewLi As far as I can tell, the hack doesn't work without an ID, because the label attaches itself to the input via the ID. — Cassidy, Feb 18 '17 at 00:00
Possible duplicate of [How to generate unique IDs for form labels in React?](http://stackoverflow.com/questions/29420835/how-to-generate-unique-ids-for-form-labels-in-react) — Andrew Li, Feb 18 '17 at 00:04
I don't suspect there's another way to do it. IDs have to be unique and you'll have to generate something unique every time for the ID or else you can't really have labels. — Andrew Li, Feb 18 '17 at 00:11
Thanks @AndrewLi. I understand how to make unique IDs. I'd like to avoid that method if possible, whether it be to not use the "label" method, or some other way. — Cassidy, Feb 18 '17 at 00:11
@AndrewLi is there another way to use an image for a checkbox besides this method that I didn't find? — Cassidy, Feb 18 '17 at 00:12
So I understand you're trying to have a custom image for the checkbox? — Andrew Li, Feb 18 '17 at 00:13
Well, I'm not a CSS expert. I found [this](http://stackoverflow.com/a/31442011/5647260) which does not have the need for an ID. — Andrew Li, Feb 18 '17 at 00:18

Andy_D · Accepted Answer · 2017-02-19T16:58:01.013

1

Pass the id as a prop to the component when you instantiate it.

<Checkbox id="whatever" value={state.valueOrWhatever} text="Change The Value!" />

in your component (note for in JSX is htmlFor):

<input type="checkbox" name={this.props.id} value={this.props.value} id={this.props.id} /> <label htmlFor={this.props.id}></label> {this.props.text}

edited Feb 19 '17 at 16:58

answered Feb 18 '17 at 14:47

Andy_D

4,112
27
19

score 0 · Answer 2 · answered Jan 08 '20 at 02:45

0

my way to do this is usually to do something like this:

<div className="checkbox">
   <label><input type="checkbox" value="valuable" /> <span>{this.props.text}</span></label>
</div>

answered Jan 08 '20 at 02:45

Alan Draper

389
2
7

Reusable React checkbox component with image without ID

2 Answers2