CODEWITHSUNDEEP
reactjsreact-hooks
Sundeep
Sundeep

Reputation: 179

State gets Updated only when we click on the button twice and not once by using Recat Hooks

  1. I need to show only the highest value when I click on the button. But here the state is getting updated only when we click on the button twice and not once.
  2. Can we do this using ES6 features like the filter method? Here I did it by using a for loop:
const [dataObject, setdataObject] = useState([{}]);
const [filterData, setfilterData] = useState({});

const showMillions = () => {
  // //console.log(dataObject);
  let x = 0;
  let name = '';
  for (let i = 0; i < dataObject.length; i++) {
    // console.log(dataObject);
    if (dataObject[i].money > x) {
      x = dataObject[i].money;
      name = dataObject[i].name;
    }
  }
  setfilterData(name);
  for (let i = 0; i < dataObject.length; i++) {
    if (filterData === dataObject[i].name) {
      setdataObject([dataObject[i]]);
    }
  }
};
<div><button className="btn btn-dark" onClick={showMillions} >Show Millionaires</button></div>

Upvotes: 0

Views: 49

Answers (1)

Md Sabbir Alam
Md Sabbir Alam

Reputation: 5054

You had to click the button twice because the setfilterData(name) is asynchronous. You can either use useEffect or use the name instead of filterData in the last for loop.

const [dataObject, setdataObject] = useState([{}]);
const [filterData, setfilterData] = useState({});

useEffect(() => {
    // using filter
    setDataObject(dataObject.filter((item) => item.name === filterData));
}, [filterData]);

const showMillions = () => {
    // //console.log(dataObject);
    let x = 0;
    let name = '';

    for (let i = 0; i < dataObject.length; i++) {
        // console.log(dataObject);
        if (dataObject[i].money > x) {
             x = dataObject[i].money;
             name = dataObject[i].name;
        }
    }
    setfilterData(name);
  }
};
<div><button className="btn btn-dark" onClick={showMillions} >Show Millionaires</button></div>

Upvotes: 1

Related Questions