Problem comes when use operators in a for loop in React

Question

I am new to React and I try to get a summation using for loop in react. To do that I use this code.

function CompanyForms() {

    const { postId, companyId } = useParams();

    const [offers, setOffers] = useState([]);

    useEffect(()=>{
        getAllOffers();
    }, []);

    const getAllOffers = async () => {
        await axios.get(`/viewPendingCompanyOffers`)
            .then ((response)=>{
                const allNotes=response.data.existingOffers;
                setOffers(allNotes);
            })
            .catch(error=>console.error(`Error: ${error}`));
    }
    console.log(offers);

    const wasteItem = offers?.filter(wasteItem => wasteItem.status==='accepted' && wasteItem.companyId===companyId);
    console.log(wasteItem);

    const wasteItemLength = wasteItem.length;
    console.log(wasteItemLength);

    let quantity=0;

    for (let i = 0; i < wasteItemLength; i++) {
       quantity += wasteItem.map(wItem=>wItem.quantity)
    }

    console.log(quantity);

}

First I call the API and get a length 9 array of objects. Then I use the filter function to filter the data that are in length 9 array of objects. As the result of this filter function, I get length two array of objects. This image shows that result.

Then I assign the length of the array of objects that get from the filter function to a variable const wasteItemLength = wasteItem.length. Then I use a for loop with operators to get the summation of quantity in two array of objects called as wasteItem.

The quantity field has a value of 20 in both wasteItem array of objects. I try to add these two values using the for a loop. Then when using this console.log(quantity), I should get 40 as the answer. But the problem is I get this

as the result instead of value 40. What is the reason for this problem? How do I solve this problem?

Thank you.

Wai Ha Lee · Accepted Answer · 2021-08-26 12:54:59Z

1

Array.map returns an array. Its intended usage is returning a new array whose values have been transformed by some function that you pass as the first argument. In your case, you're trying to sum a bunch of arrays when you do quantity += wasteItem.map... inside your loop body. I'm not sure exactly what your goal was in doing that but it seems like a mistake to me.

You have three better options:

Do quantity += wasteItem[i].quantity inside your for loop

Use a for..of loop which is simpler to use and read:

for(const item of wasteItem) {
  quantity += item.quantity;
}

Use Array.reduce:

const quantity = wasteItem.reduce((x, sum) => sum + x, 0);

By the way, if you name your variable wasteItems, the plural makes it more obvious that it's an array instead of a single item. Variable names are very important to make your code more readable for your future self and others!

edited Aug 26, 2021 at 12:54

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Aug 25, 2021 at 20:42

philraj

8416 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

Problem comes when use operators in a for loop in React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related