React Sum Values in Array of Objects

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Marks</title>

</head>

<body>

<div id="app">
        <h2>Javascript Sum of Array of Object</h2>

<p>Total Marks: <span id="totalMarks">0</span></p>
    </div>

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>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 20px;
        }

h2 {
            color: #333;
        }

ul {
            list-style: none;
            padding: 0;
        }

li {
            margin-bottom: 10px;
        }

p {
            margin-top: 20px;
            color: #555;
        }

span {
            font-weight: bold;
            color: #0066cc;
        }
    </style>

</body>

</html>