Keeping Multiple Field Values Saved In State React

Question

I have a table that I pull values of it from an API. It displays multiple rows of firm, office, account, and sales fields. Now I need to add a way to update field values, for example user would change the value of the firm then, click submit which would update the value in the Database through API.

First problem I am facing here is how can I keep a track of multiple states of things so when they change I update them and submit new values?

I have this but I don't think it'll work?

 state = {[
        firm: null,
        office: null,
        salesCode: null,
        account: null
     ]}

if you would have multiple rows , then your state should be structured as this.state={ arr: [ firm:null,office:null,salesCode:null,account:null]} — Geeky
– Geeky, Commented Jan 24, 2019 at 15:28
if I do this, does it assign them null anyway? tableInfo: [firm,office,salesCode,account], — Extelliqent
– Extelliqent, Commented Jan 24, 2019 at 15:29
No you would get error as firm is not defined ,it expects either firm to be a string or if it has to be a value, make sure that you give it as key/value pair — Geeky
– Geeky, Commented Jan 24, 2019 at 15:32

CWSites · Accepted Answer · 2019-01-24 16:02:43Z

I would suggest building a helper function which compares the two values.

compareData(currentData, newData) {
    if(currentData === 'undefined' || (newData && currentData !== newData)) {
        return newData;
    } else {
        return false;
    }
}

As long as the name you are using on the input field matches what you have as your key in the state then it should do a proper comparison and only update state if it has changed.

Provided you are using input fields for gathering your data your code would look something like this. Keep in mind you would need to build a loop to handle multiple rows.

<Input type="text" name="firm" onChange={this.handleInputChange} />

handleInputChange(el) {
  const name = el.currentTarget.name;
  const currentValue = this.state[name];
  const newValue = el.currentTarget.value;

  if(this.compareData(currentValue, newValue)) {
    this.setState({ [name]: newValue });
  }
}

If you would post a bigger sample of the code you're working with I'd be happy to help further.

Extelliqent · Accepted Answer · 2019-01-24 15:44:02Z

0

This is how you save an array inside state, and in case you need to save other values, follow as below. Thanks to @Geeky

state = {
        tableInfo: [{firm:null,
                    office:null,
                    salesCode:null,
                    account:null}],
        newFirm: null,
        newOffice: null,
        newSalesCode: null,
        newAccount: null,
    }

answered Jan 24, 2019 at 15:44

Extelliqent

1,8556 gold badges35 silver badges53 bronze badges

Collectives™ on Stack Overflow

Keeping Multiple Field Values Saved In State React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related