React Sum Values in Array of Objects

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    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>

.title {
      font-size: 24px;
      color: #333;
    }

.fruits-list {
      list-style: none;
      padding: 0;
    }

.fruit-item {
      font-size: 18px;
      margin: 10px 0;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      background-color: #f9f9f9;
      color: #444;
    }

.total-price {
      font-size: 20px;
      margin-top: 20px;
      color: #f39c12;
      font-weight: bold;
    }
  </style>
</body>

</html>