React - checkboxes - FA

its based on react template from jsfiddle shows how to add font-awesome styling to checkboxes

by WrRaThY

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

div.space-around {
  padding: 5px;
}

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

input[type=checkbox]+label:before {
  display: inline-block;
  font-family: FontAwesome;
  content: "\f096"; /* unchecked icon */
  vertical-align: middle;
  letter-spacing: 10px;
}

input[type=checkbox]:checked+label:before {
  content: "\f046"; /* checked icon */
  font-family: FontAwesome;
  vertical-align: middle;
  letter-spacing: 10px;
}

React

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    	items: [
      	{ text: "Learn JavaScript", done: false },
        { text: "Learn React", done: false },
        { text: "Play around in JSFiddle", done: true },
        { text: "Build something awesome", done: true }
      ],
      changedCounter: 0,
    }
  }
  
  toggleByIndex(idx) {
    this.state.items[idx].done = !this.state.items[idx].done;
    this.setState({ changedCounter: this.state.changedCounter + 1 });
  }

  printState() {
    console.log(`times any checkbox changed state: ${this.state.changedCounter}`);
    this.state.items.forEach(item => {console.log(item)})
  }
  
  render() {
    return (
      <div>
        <h2>Todos</h2>
          {this.state.items.map((item, idx) => (
            <div className="space-around">
              <input
                id={`checkbox${idx}`}
                type="checkbox"
                checked={this.state.items[idx].done === true}
                onChange={() => this.toggleByIndex(idx)}
              />
              <label htmlFor={`checkbox${idx}`}>
                <span className={item.done ? "done" : ""}>{item.text}</span>
              </label>
            </div>
          ))}
        <div className="space-around">
          <button onClick={() => this.printState()}>
            print state to the console
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))