CODEWITHSUNDEEP
javascriptreactjsthissetstate
Artur Juźwik
Artur Juźwik

Reputation: 27

why this.setState going to "is not a function"?

Im trying build simple app to learn how to make api calls. When I'm trying to setState in react with onClick function I'v created, every time I'v tried to invoke I get

not a function

I tried to bind this like this:

this.setState(() => ({
  rowPos: null
}).bind(this))

but that did not worked also, I get the error:

(intermediate value).bind is not a function

there is constructor with state object:

constructor(props) {
  super(props);
  this.state = {
    endpoint: 'https://jolapatola5.fakturownia.pl/invoices.json',
    params: {
      api_token: 'B5Lg3uPBCMcDNX5lsQOM/jolapatola5',
      invoice: {
        "kind": "vat",
        "number": null,
        "sell_date": "2019-07-14",
        "place": 'Lublin',
        "sell_date": "2019-07-14",
        "issue_date": "2019-07-14",
        "payment_to": "2019-07-21",
        "buyer_name": "aaa",
        "buyer_tax_no": "5252445767",
        "buyer_street": "aaa",
        "buyer_post_code": "",
        "buyer_city": "",
        "seller_name": 'aaa',
        "seller_street": '',
        "seller_post_code": '',
        "seller_city": '',
        "seller_bank_account": '',
        "seller_tax_no": '',
        positions: [{
            "name": "Produkt A1",
            "tax": 23,
            "total_price_gross": 10.23,
            "quantity": 1
          },
          {
            "name": "Produkt A1",
            "tax": 23,
            "total_price_gross": 10.23,
            "quantity": 1
          }
        ]
      }
    }
  }
  this.removeProductRow = this.removeProductRow.bind(this);
}

and method I'm trying to invoke onClick:

removeProductRow(id) {
  let rowPos = this.state.params.invoice.positions[id];

  this.setState(() => ({
    rowPos: null
  }).bind(this))

  console.log(rowPos)
};

id is passed when I'm mapping components

The result I'm trying to perform is set the this.state.params.invoice.position alias rowPos to null, now its an object.

Thanks for any help

EDIT: there is the way I'm mapping components:

{
  this.state.params.invoice.positions.map(function(item,index){
  return 
    <ItemRow key={index} removeProductRow={() => this.removeProductRow(index)}/>
  },this)
}

Upvotes: 0

Views: 155

Answers (2)

Janiis
Janiis

Reputation: 1576

There are two things I would do different.

First: Fixing the remove method.

removeProductRow(index){
  let positionsUpdated = this.state.params.invoice.positions.filter((_, idx) => idx !== index);
  // update just the positions of the state.
  // try to create paramsUdpated yourself.
  this.setState({params: paramsUdpated});
};

Second: In render I would not pass callback to props, just the name of the function and use prop itemIndex to get the index of the positions array in ItemRow component.

{this.state.params.invoice.positions.map(function(item,index){
  return (<ItemRow key={index} itemIndex={index} removeProductRow={this.removeProductRow}/>)}

Working example of my idea: https://codesandbox.io/s/priceless-sun-tb76r

Upvotes: 0

Dupocas
Dupocas

Reputation: 21317

setState should be binded to React.Component, when you call this.setState.bind(this) you are actually binding it to removeProductRow, just remove the .bind(this)

Upvotes: 2

Related Questions