import React from 'react';
import ReactDOM from 'react-dom/client';

let data = [
  {name: 'Aron', score: 39},
  {name: 'Kyle', score: 45},
  {name: 'Alex', score: 60},
  {name: 'Chris', score: 95},
  {name: 'Emily', score: 90},
  {name: 'Anna', score: 95},
  {name: 'Kristi', score: 100}
];

function getGrade (score) {
  if (score > 95)
    return 'A+';
  else if (score > 90)
    return 'A';
  else if (score > 80)
    return 'B';
  else if (score > 60)
    return 'C';
  else if (score > 40)
    return 'D';
  else
    return 'F';
}

// write code below this line
function Grades(props) {
  return (
    <ul>
    {data.map (student => (
        <li>{student.name} - {getGrade(student.score)}</li>
    ))}
    </ul>
  );
}
// write code above this line

const root = ReactDOM.createRoot(document.getElementById('root'));

// modify code below this line
root.render(<Grades />);
// modify code above this line