Idiomatic way to remove a child

Question

I am trying to remove a child component from a list.

Here is the jsbin that shows me so far.

I have the following code in a method of rendering a parent component that generates such a list:

var items = this.state.items.map(function(item, i) {
  return (
    <Todo description={item} key={item} onClick={this.handleRemove.bind(this, i)}/>);
}.bind(this));

The problem is that the even handler is not called when pressed.

Another way to approach this would be to have a click handler on the child component, but I don't know how to remove an element from the parent component.

Answer 1

Click handlers can only be added to DOM-based components; if you want to add them to a composite component, you must pass them to the DOM component, as such:

this.state.items.map(function(item, i) {
  return (
    <Todo description={item} key={item} onClick={this.handleRemove.bind(this, i)}/>);
}.bind(this));

// ...

var Todo = React.createClass({
  render: function() {
    return (
      <tr onClick={this.props.onClick}>
        <td>{this.props.description}</td>
      </tr>
    );
  }
});

jsbin click fireler, , CSS ( ReactCSSTransitionGroup):

.example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

.example-leave.example-leave-active {
  opacity: 0.01;
}

, , span span:

<table>
  <ReactCSSTransitionGroup transitionName="example" component="tbody">
    {items}
  </ReactCSSTransitionGroup>
</table>

jsbin : http://jsbin.com/dakenabehi/3/edit?css,js,console,output