React Js Average of array item

React Js Average of array item:To calculate the average of array items in React.js, you can use the reduce method, forEach loop, or for...of loop.

The reduce method reduces the array to a single value by accumulating the sum of all items, then divides it by the array length.

The forEach loop iterates over each item and adds it to a sum variable, which is then divided by the array length to find the average.

Similarly, the for...of loop iterates over each item, accumulating the sum, and finally divides it by the array length to calculate the average.

written

reviewed

updated

How can I calculate the average of the items in an array using ReactJS?

This React.js code calculates the average of items in the array. It initializes an array called "numbers" with some values.

The sum of all the numbers in the array is calculated using the reduce function. Then, the average is obtained by dividing the sum by the length of the array.

React Js Average of array item Example

    <script type="text/babel">
        const { useState, useEffect } = React;

        function App() {
            const numbers = [16, 25, 345, 46, 5];
            const sum = numbers.reduce((acc, curr) => acc + curr, 0);
            const average = sum / numbers.length;
            return (
                <div className="container">
                    <h3>React Js Average of array item</h3>
                    <p>Numbers: <span className='numbers'>{numbers.join(', ')}</span></p>
                    <p>Average: <span className='average'>{average}</span></p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Average of array item

How can you calculate the average of array items in React.js using the `forEach()` method?

The code snippet uses React.js to calculate the average of an array of numbers using the forEach() method.

It initializes an array of numbers, iterates over each item in the array using forEach(), and accumulates the sum of all items.

The average is calculated by dividing the sum by the length of the array. The result is then displayed in a React component along with the original numbers.

React Js Average of array item using foreach() method

    <script type="text/babel">
        function App() {
            const numbers = [36, 25, 345, 46, 5];
            let sum = 0;
            numbers.forEach(item => sum += item);
            const average = sum / numbers.length;
            return (
                <div className="container">
                    <h3>React Js Average of array item using foreach() method</h3>
                    <p>Numbers: <span className='numbers'>{numbers.join(', ')}</span></p>
                    <p>Average: <span className='average'>{average}</span></p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Average of array item using foreach() method

What is the ReactJS code to calculate the average of array items using a `for...of` loop?

The code snippet calculates the average of the items in an array using a for...of loop in React.js. It initializes an array called "numbers" with some values.

It then iterates through each item in the array using the for...of loop and adds the item to a variable called "sum". After the loop,

it calculates the average by dividing the sum by the length of the array. The average value is then rendered in a React component along with the original array values.

React Js Average of array item using for....of loop

    <script type="text/babel">
        function App() {
            const numbers = [36, 25, 345, 46, 5];
            let sum = 0;
            for (const item of numbers) {
                sum += item;
            }
            const average = sum / numbers.length;
            return (
                <div className="container">
                    <h3>React Js Average of array item using for....of loop</h3>
                    <p>Numbers: <span className='numbers'>{numbers.join(', ')}</span></p>
                    <p>Average: <span className='average'>{average}</span></p>
                </div>
            );
        }

        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

React JS Tutorial

React Js Average of array item

How can I calculate the average of the items in an array using ReactJS?

React Js Average of array item Example

Output of React Js Average of array item

How can you calculate the average of array items in React.js using the `forEach()` method?

React Js Average of array item using foreach() method

Output of React Js Average of array item using foreach() method

What is the ReactJS code to calculate the average of array items using a `for...of` loop?

React Js Average of array item using for....of loop

Output of React Js Average of array item using for....of loop

React JS Tutorial

React Js Average of array item

Feedback for Abhishek

How can I calculate the average of the items in an array using ReactJS?

React Js Average of array item Example

Output of React Js Average of array item

How can you calculate the average of array items in React.js using the `forEach()` method?

React Js Average of array item using foreach() method

Output of React Js Average of array item using foreach() method

What is the ReactJS code to calculate the average of array items using a `for...of` loop?

React Js Average of array item using for....of loop

Output of React Js Average of array item using for....of loop