save the previous state to one array in ReactJS

Question

I have a class that gets the available funds on the account from the REST API. This number is saved in state.

I need to create a separate state in which I will store the array of all state changes

For example, my state availableFunds is: 86 So I would like, that my availableFundsArray returns: [86]

If my state availableFunds changes the number to eg: 60 So I would like, that my availableFundsArray returns: [86, 60]

class AvailableFunds extends Component {
  constructor() {
    super();

    this.state = {
      availableFunds: [],
      availableFundsArray: [],
    };
  }

componentDidMount() {
    this.Auth.availableFunds(this.props.id)
      .then(res => {
        if (res) {
          this.setState({
            availableFunds: res.reduce(
              (accumulator, currentValue) =>
                accumulator + currentValue.available_funds,
              0,
            ),
          });
        }
      })
      .catch(err => {
        console.log(err);
      });
  }

@MuhammadFarrukhFaizy I know I need to make concatenations, but I don't know, whether it should be a new method, or do it when it saves availablefunds state. — ReactRouter4
– ReactRouter4, Commented Jan 10, 2019 at 1:50

Nicholas Porter · Accepted Answer · 2019-01-10 01:58:06Z

1

When you set setState, reference the previous form of the state and add onto it.

Have availableFunds be a Number not an array.

let funds = [this.state.availableFunds];

funds.push(this.state.availableFunds)

this.setState({
    availableFundsArray: funds
})

answered Jan 10, 2019 at 1:58

Nicholas Porter

3,0214 gold badges25 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ReactRouter4 Over a year ago

It's not working, because in this.state.availableFunds is my value of MySQL databases and I don't use setState to change this variable. This variable changes dynamically, when I change this value into db.

Carlos Garcia · Accepted Answer · 2019-01-10 02:32:13Z

0

Inside your if statement you can calculate before the setState the funds available and use that variable to update the state with the prevState as below

this.Auth.availableFunds(this.props.id)
      .then(res => {
        if (res) {
            const amount = res.reduce((accumulator, currentValue) => accumulator + currentValue.available_funds, 0, )

            this.setState( prevState => {
            return {
                availableFunds: amount,
                availableFundsArray: [...prevState.availableFundsArray, amount]
            }
          });
        }
      })
     .catch(err => {
        console.log(err);
      });

answered Jan 10, 2019 at 2:32

Carlos Garcia

111 bronze badge

3 Comments

Nicholas Porter Over a year ago

Yes this answer looks good too. I like the use of the spread operator and separating the amount into a variable.

ReactRouter4 Over a year ago

It's not working, because in this.state.availableFunds is my value of MySQL databases and I don't use setState to change this variable. This variable changes dynamically, when I change this value into db, because this is my response from REST API.

Carlos Garcia Over a year ago

It is not very clear what are trying to accomplish, both answers do not change the value received from the REST API, it just stores it in the state.

Collectives™ on Stack Overflow

save the previous state to one array in ReactJS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related