RenderScoresTwo.js

const renderStudentsScore = (subjects) => {
  const arrayOfDivs = [];

  Object.keys(subjects).forEach(subjectName => {
    const list = subjects[subjectName].map(({ id, name, score }) => (
      <li key={`student-id-${id}`}>
        {name}: {score}
      </li>
    ));

    arrayOfDivs.push(
      <div key={`scores-${subjectName}`}>
        <h4 style={{ textTransform: 'capitalize' }}>{subjectName} Scores</h4>
        <ul>{list}</ul>
      </div>
    );
  });

  return arrayOfDivs;
};