Ad

How To Re-render Immediate After On-click?

- 1 answer

Here I have have one table. In which I want to delete row and simply want to see change at that time (table with deleted row). I found forceupdate() method does that or change in state simply re-render but both case doesn't work for me.

Here is the code:

var table = React.createClass({

  getInitialState:function() {
    return {
      data:[]
    };
  },
componentDidMount: function() {
    $.get('http://improwised.cgc.com/portfolios?token=yR225Y',
    function(result) {                    
      if (this.isMounted()) {
        this.setState({
          data: result.data,
        });
      }
    }.bind(this));
  },


  getComponent: function(Key) {

    $.ajax({
      type: "DELETE",
      url: "http://improwised.cgc.com/portfolios/"+Key+"?        token=yR225Y",
      //context: document.body
    })
  },


  render:function() {

    return (
      <div>
          <Table striped bordered condensed hover>
            <thead>
              <tr>

                <th>Name</th>
                <th>current_balance</th>
                <th>market_price</th>
                <th>profit/loss</th>
                <th>delete</th>

              </tr>
            </thead>
            <tbody>
              {
                this.state.data.map(function(data, index) {
                  return <tr>
                  <td><a href={'/#/portfolio/'+data.id}>{data.name}</a></td>
                  <td>{data.current_balance}</td>
                  <td></td>
                  <td></td>
                  <td><button value={data.id} onClick={this.getComponent.bind(this,data.id)}>delete</button></td>
                  </tr>
                }.bind(this))
              }

            </tbody>
          </Table>
        </div>
    );
  }
});
module.exports = table;
Ad

Answer

You need set new state after delete, like this

getComponent: function(Key) {
  $.ajax({
    type: "DELETE",
    url: "http://improwised.cgc.com/portfolios/" + Key + "?token=yR225Y",
  }).success(function () {
    var data = this.state.data.filter(function (e) {
      return e.id !== Key;
    });

    this.setState({ data: data });
  }.bind(this))
}
Ad
source: stackoverflow.com
Ad