How can I manage multiple setState calls in the same React component?

Question

I am using an npm package for creating a data grid. This datagrid is a class component and comes with rows as state. I am also trying to add inputs above the data grid that allow users to change the values of these inputs while also changing the values of the data grid. However, only the data grid values are changing. The inputs are NOT changing so the updateFormData function isn't working

Here is the code

import ReactDOM from "react-dom";
import ReactDataGrid from "react-data-grid";
import "./SellPressure.css";

const columns = [
  { key: "layer", name: "Layer", editable: false },
  { key: "electric", name: "Elec. Rate", editable: true, resizable: true },
  { key: "percentHash", name: "% Hash", editable: true },
  { key: "percentHashAfterBlowout", name: "Adj. % Hash", editable: false },
  { key: "oldGen", name: "S9 Cost", editable: false },
  { key: "newGen", name: "S17 Cost", editable: false },
  { key: "OldGenTier", name: "S9 %", editable: false },
  { key: "NewGenTier", name: "S17 %", editable: false },
  { key: "OldGenTierBlowout", name: "Adj. S9%", editable: false },
  { key: "NewGenTierBlowout", name: "Adj. S17%", editable: false },
  { key: "percentSold", name: "% Sold", editable: false },
  { key: "BTCSold", name: "BTC Sold", editable: false },
];


const rows = [
  { layer: 1, electric: .020, percentHash: 5, percentHashAfterBlowout: 0, oldGen: 0, newGen: 0,
  OldGenTier: 0, NewGenTier: 0, OldGenTierBlowout: 0, NewGenTierBlowout: 0, percentSold: 0, BTCSold: 0
}
];

// require complex functions to determine their value
// percentHashAfterBlowout,
// OldGenTierBlowout,
// percentSold




class Example extends React.Component {
  // state = { rows };

  state = {
      rows: [...rows],
      rewardYo: "",
      btcPriceYo: this.props.btcPrice,
      difficultyYo: this.props.difficulty,
      s9Hash: 13.5,
      s17Hash: 50,
      s9Power: 1400,
      s17Power: 2100 
  }



  updateFormData = event => {
    this.setState({
      [event.target.name]: event.target.value
    });
  };


  onGridRowsUpdated = ({ fromRow, toRow, updated }) => {
    this.setState(state => {
      const rows = state.rows.slice();
      for (let i = fromRow; i <= toRow; i++) {
        rows[i] = { ...rows[i], ...updated };
      }
      return { rows };
    });
  };




  render() {
    return (

<div>

        <input
        value={this.state.rewardYo}
        onChange={this.updateFormData}
        type="number"
        name="rewardYo"
        required
        />

<input
        value={this.state.btcPriceYo}
        onChange={this.updateFormData}
        type="btcPriceYo"
        name="btcPriceYo"
        required 
        />

  <div>
      <ReactDataGrid
        columns={columns}
        rowGetter={i => this.state.rows[i]}
        rowsCount={1}
        onGridRowsUpdated={this.onGridRowsUpdated}
        enableCellSelect={true}
        cellRangeSelection={{
          onStart: args => console.log(rows),
          onUpdate: args => console.log(rows),
          onComplete: args => console.log(rows)
        }}
      />
  </div>
</div>
    );
  }
}

export default Example;```

score 0 · Answer 1 · answered Apr 13 '20 at 20:11

0

The inputs are not changing because the updateDataForm need some changes:

updateFormData = (event, stateName) => {
    this.setState({
      [stateName]: event.target.value
    });
  };

Then you call it like this:

onChange={(e) => this.updateFormData(e, 'theStateYouWantToChange')}

answered Apr 13 '20 at 20:11

Carlos Saiz Orteu

1,735
1
10
18

Just tried that and it didn't work. So Im trying to modify the rewardYo in the state. So are you saying to put onChange={(event) => this.updateFormData(event, 'rewardYo')} – George Adams Apr 14 '20 at 00:48
But if I comment out the ReactDataGrid and onGridRowsUpdated, then the input works and it changes state SO i think this is an issue of having two setState calls – George Adams Apr 14 '20 at 00:54

How can I manage multiple setState calls in the same React component?

1 Answers1