Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Update the state of an Array twice in a function

In a table i am integrating search functionality based on two parameters based on bank and rate

When i click on Submit i want the set the state of the array to be updated twice first it will initialize will the global array after the results are filtered the updated value should be updated in the state

const [fixedDepositNriRates, setFixedDepositNriRates] = useState([]);
const [testData, setTestData] = useState([]);
const SearchResults = () => {
    setFixedDepositNriRates(testData);
    let data = [...fixedDepositNriRates];
    if (bank) {
      data = data.filter(item => item.Group.indexOf(bank) !== -1)
    }
    if (rate) {
      if (rate === 8) {
        data = data.filter(item => item.interest < rate)
      }
      if (rate === 9) {
        data = data.filter(item => item.interest > rate)
      }
      if (rate === 10) {
        data = data.filter(item => item.interest > rate)
      }
    }
    setFixedDepositNriRates(data);
  }

I got the filtered result in the variable data but i am not able to set the state as
setFixedDepositNriRates(data);

Tags:

2

Answers


  1. 0

    you want to directly update fixedDepositNriRates with the filtered results. In that case, you can use a callback in your setState function to ensure that you’re working with the most recent state.

    const [fixedDepositNriRates, setFixedDepositNriRates] = useState([]);
const [testData, setTestData] = useState([]);

const SearchResults = () => {
    setFixedDepositNriRates(testData);
    setFixedDepositNriRates(prevState => {
        let data = [...prevState];
        if (bank) {
            data = data.filter(item => item.Group.indexOf(bank) !== -1)
        }
        if (rate) {
            if (rate === 8) {
                data = data.filter(item => item.interest < rate)
            }
            if (rate === 9) {
                data = data.filter(item => item.interest > rate)
            }
            if (rate === 10) {
                data = data.filter(item => item.interest > rate)
            }
        }
        return data;
    });
}
    Login or Signup to reply.
  2. 0

    The fixedDepositNriRates is the result of filtering (if needed) the testData. You don’t need to clone the testData, and then filter and set fixedDepositNriRates. Just filter the testData before you set it to fixedDepositNriRates.

    In addition, you can extract the filtering logic to a filterResults function, and do the entire filtering in a single step:

    // outside of the component 
const filterResults = (data, bank, rate) => {
  // don't filter when bank doesn't exist or rate is out of bounds
  if(!bank && (rate < 8 || rate > 10)) return data;
  
  const predicates = [];
  
  // populate the list of conditions
  if(bank) predicates.push(item => item.Group.includes(bank));
  if(rate === 8) predicates.push(item => item.interest < rate);
  else if(rate > 8) predicates.push(item => item.interest > rate);
  
  // filter and apply all conditions
  return data.filter(item => predicates.every(predicate => 
    predicate(item)
  )));
}

// inside the component

const [fixedDepositNriRates, setFixedDepositNriRates] = useState([]);
const [testData, setTestData] = useState([]);

const SearchResults = () => {
  setFixedDepositNriRates(filterResults(testData, bank, rate));
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search