How to change element style in React?

Question

I am very new to Reactjs and I have tdin my method render:

<td style={{cursor: 'pointer'}} onClick={} key={i}>

When I click this td, I want to change its style, how to do it in js reaction?

Thanks.

Edited by:

Here is how I generated td:

{this.props.posts.map((service, i) =>
     <tr>
        <td style={{cursor: 'pointer'}} key={i}>
           <span> {posts.createdBy} </span>
        </td>
     </tr>
)}

Answer 1

Assuming all the other ducks are in order, you can track the class in the state of the components, and then update the state using logic in the onClick event.

var TableData = React.createClass({
  getInitialState: function() {
    return {
      class: 'pointer'
    };
  },
  changeStyle: function(e) {
    if (this.state.class === 'pointer') {
      this.setState({class: 'not pointer'});
    } else {
      this.setState({class: 'pointer'});
    }
  },
  render: function() {
    return (
      <td style={ cursor: {this.state.class} }
          onClick={this.changeStyle}
          key={i}>
      </td>
    );
  }
});