homerboy homerboy - 7 months ago 31
CSS Question

Apply CSS styling to a mapped item

I have a list of items that are checkboxes for a settings page. These are stored in a

const items
like so:

const ITEMS = [
["youtube", "YouTube"],
["videos", "Videos"],
["facebook", "Facebook"],
["settings", "Settings"],

and currently, these four items are just listed as list items. What I have right now is this:

enter image description here

but what I want is this:

enter image description here

I was thinking of applying a check to see if the sub-category belongs to that parent category, and apply some type of indentation to the sub-categories. Is that possible to do through a
(which is how I'm iterating through this array)? Or is there a smarter, more efficient way to solve this issue?

Here's how I render my checkboxes:

item: function(i) {
return (
<div className="checkbox">
<input type="checkbox" checked={this.state.items[i[0]]}/>

render: function() {
return (
<div className="col-sm-12">
{_(ITEMS).map(this.item, this)}


I would recommend you to use objects in an array. So you're able to map more than just property to each item. For accessing it only with normal Javascript I would use a for-Loop because of its compability with older browsers. An example I made, can be found here: