Set LI element to inactive state on clicking button in React JS
<p>OK, so this is a noob question and the answer is probably right under my nose but I can't seem to figure out how to do this. Basically, I am making a To-do list in React and want a way for the user to mark an item as completed. </p>

<p>I've tried setting it through a parent container's state, then accessing that state through the elements props but it's not working. </p>

<p>Here is my code so far. See the getInitialState function, onCompleted, return function of ListContainer, and the Item.  </p>

<pre><code>var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      numChildren: 0,
      list: [],
      disabled: false
    };
  },
  onAddChild: function() {
    var inputValue = document.getElementById('itemAdder').value;
    var ul = document.getElementById('list');

    var newList = this.state.list;
    if(inputValue !== '') {
      newList.push(inputValue);
      ul.style.display = 'block';
    }
    this.setState({
      numChildren: this.state.numChildren + 1,
      list: newList
    });
  },
  onDeleteChild: function(index) {
    this.state.list.splice(index, 1);
    this.setState({
      list: this.state.list
    });
  },
  onCompleted: function() {
    this.setState({
      disabled: true
    });
  },
  render: function() {
    var children = [];
    for (var i = 0; i &lt; this.state.list.length; i++) {
      children.push(&lt;Item key={'item_' + i} number={i} onDeleteChild={this.onDeleteChild} completed={this.state.onCompleted} content={this.state.list[i]}/&gt;);
    };
    return (
      &lt;List addChild={this.onAddChild}&gt;
        {children}
      &lt;/List&gt;
    );
  }
});

var List = React.createClass({
  render: function() {
    return (
      &lt;div id="listContainer"&gt;
        &lt;h1 className="no-margins even-padding page-header "&gt;To do list&lt;/h1&gt;
        &lt;div className="even-padding form-inline"&gt;
          &lt;input type="text" name="itemAdder" id="itemAdder" className="form-control" placeholder="Enter things that need doing..." /&gt;
          &lt;button type="button" className="btn btn-primary" onClick={this.props.addChild}&gt;Add item&lt;/button&gt;
          &lt;ul id="list" className="no-margins list"&gt;
            {this.props.children}
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
});

var Item = React.createClass({
  complete: function() {
    this.props.completed;
  },
  delete: function() {
    this.props.onDeleteChild(this.props.number);
  },
  render: function() {
    return (
      &lt;li className="clearfix"&gt;
        {this.props.content}
        &lt;div className="pull-right"&gt;
          &lt;button onClick={this.complete} id="completed" className="btn btn-success btn-xs"&gt;&amp;#x2714;&lt;/button&gt;
          &lt;button id="remove" onClick={this.delete} className="btn btn-danger btn-xs"&gt;&amp;#x2718;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/li&gt;
    );
  }
});

var App = React.createClass({
  render: function() {
    return (
      &lt;div id="main" className="page-wrap"&gt;
        &lt;ListContainer /&gt;
      &lt;/div&gt;
    );
  }
});

ReactDOM.render(
  &lt;App/&gt;,
  document.getElementById('app')
);
</code></pre>

<p>Thanks in advance for your help! </p>