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.




Thanks for your feedback!
Your contributions will help us to improve service.
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
xxxxxxxxxx
<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>
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
xxxxxxxxxx
<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>
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
xxxxxxxxxx
<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>