React Sum Values in Array of Objects | Array Element

        const { useState } = React;

​

        function App() {

            const array = [1, 24, 34, 4, 51];

            const sum = array.reduce((acc, current) => acc + current, 0);

​

            return (

                <div className='container'>

                    <h1>React Js sum of all items in a array</h1>

                    <p>Array: {array.join(', ')}</p>

                    <p>Sum: {sum}</p>

                </div>

            );

        }

​

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

    </script>

    const { useState } = React;

​

    function App() {

      const [numbers] = useState([13, 122, 13, 14, 15]); // Your array of numbers

      const [sum, setSum] = useState(0);

​

      const calculateSum = () => {

        let total = 0;

        for (let i = 0; i < numbers.length; i++) {

          total += numbers[i];

        }

        setSum(total);

      }

​

      return (

        <div className='container'>

          <h3>React Js Sum of Number in Array</h3>

          <p>{JSON.stringify(numbers)}</p>

          <button className='calculate-button' onClick={calculateSum}>Calculate Sum</button>

          <p className='sum-text'>Sum: {sum}</p>

        </div>

​

      );

    }

​

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

  </script>

    function App() {

      const fruits = [

        { name: "Apple", price: 1.2 },

        { name: "Banana", price: 0.5 },

        { name: "Orange", price: 0.8 },

        { name: "Grapes", price: 2.0 },

        { name: "Strawberry", price: 2.5 },

        { name: "Mango", price: 1.8 },

        { name: "Pineapple", price: 1.9 },

        { name: "Watermelon", price: 2.2 },

      ];

      // Use the reduce method to sum the 'price' property of each fruit

      const totalPrice = fruits.reduce((total, fruit) => total + fruit.price, 0);

      return (

        <div className='container'>

          <h3 className='title'>React Sum Values in array of objects</h3>

          <ul className='fruits-list'>

            {fruits.map((fruit, index) => (

              <li key={index} className='fruit-item'>

                {fruit.name} - ${fruit.price.toFixed(2)}

              </li>

            ))}

          </ul>

          <p className='total-price'>Total price of fruits: ${totalPrice.toFixed(2)}</p>

        </div>

​

      );

    }

​

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

  </script>

        const students = [

            { name: 'Root', marks: 85 },

            { name: 'Warner', marks: 90 },

            { name: 'Garry', marks: 78 }

            // add more students as needed

        ];

​

        const studentList = document.getElementById('studentList');

        const totalMarksElement = document.getElementById('totalMarks');

​

        students.forEach(student => {

            const listItem = document.createElement('li');

            listItem.textContent = `${student.name}: ${student.marks} marks`;

            studentList.appendChild(listItem);

        });

​

        const totalMarks = students.reduce((sum, student) => sum + student.marks, 0);

        totalMarksElement.textContent = totalMarks;

    </script>

        // JavaScript code

        document.addEventListener('DOMContentLoaded', function () {

            const numbers = [1, 2, 3, 4, 5];

​

            // Display the original array

            const originalArrayElement = document.getElementById('originalArray');

            originalArrayElement.textContent = `Original Array: [${numbers.join(', ')}]`;

​

            // Using reduce to calculate the sum

            const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

​

            // Display the result in the element with the 'result' ID

            const resultElement = document.getElementById('result');

            resultElement.textContent = `Sum of array elements: ${sum}`;

        });

    </script>