RenderScoresOne.js

const renderStudentsScore = (subjects) => {
  const { math, physics, chemistry, biology } = subjects;
  
  const mathAverageList = math.map(({ id, name, score }) => (
    <li key={`student-id-${id}`}>
      {name}: {score}
    </li>
  ));

  const physicsAverageList = physics.map(({ id, name, score }) => (
    <li key={`student-id-${id}`}>
      {name}: {score}
    </li>
  ));

  const chemistryAverageList = chemistry.map(({ id, name, score }) => (
    <li key={`student-id-${id}`}>
      {name}: {score}
    </li>
  ));

  const biologyAverageList = biology.map(({ id, name, score }) => (
    <li key={`student-id-${id}`}>
      {name}: {score}
    </li>
  ));

  return (
    <h4>Math Scores</h4>
    <ul>{mathAverageList}</ul>
    <h4>Physics Scores</h4>
    <ul>{physicsAverageList}</ul>
    <h4>Chemistry Scores</h4>
    <ul>{chemistryAverageList}</ul>
    <h4>Biology Scores</h4>
    <ul>{biologyAverageList}</ul>
  );
};