Spot the 10 problems

// BatchList.tsx — "it works on my machine" edition

import { useState, useEffect } from 'react';

export default function BatchList({ userId }) {
  const [batches, setBatches] = useState([]);

  useEffect(() => {
    fetch('https://api.pw.live/v3/batches?user=' + userId)
      .then((r) => r.json())
      .then((d) => setBatches(d.data));
      // no .catch() — if the API fails, the user stares at nothing forever
  }, []);

  // recalculated on EVERY keystroke anywhere in the app
  const sorted = batches.sort((a, b) => b.rating - a.rating);

  return (
    <div>
      <h2>Your Batches</h2>

      // nothing rendered while loading. blank screen for 2 seconds.
      // nothing rendered when the list is empty either.

      {sorted.map((batch, index) => (
        <div key={index} className="card">
          <img src={batch.banner} />

          <h3 style={{ color: '#e23744', fontSize: '18px', padding: '12px' }}>
            {batch.name}
          </h3>

          <p>₹{batch.price}</p>

          <div onClick={() => enroll(batch.id)}>Enroll now</div>
        </div>
      ))}
    </div>
  );
}