How to find average in Reactjs when fetch from external api?

Question

How to calculate average in Reactjs when data is fetched externally?

Fetching data from - https://www.hatchways.io/api/assessment/students

{api.map(student => (
    <div className="card m-3" style={{ width: "18rem" }}>
      <div className="card-body">
        <img
          src={student.pic}
          alt="Student Detail"
          className="float-left rounded mx-auto d-block"
        />
        <div className="row">
          <div className="col text-left">
            <h5 className="card-title card-text">
              {student.firstName} {student.lastName}
            </h5>
            <p className="card-text"> Email: {student.email}</p>
            <p className="card-text">Company: {student.company}</p>
            <p className="card-text">Skill: {student.skills}</p>

I want to calculate the average inside the <p> tag. Note: Below is the continued code.

<p className="card-text">Average: {student.grades}</p>
          </div>
        </div>
      </div>
    </div>
  ))}

Answer 1

You just exposed the api and this logic doesn't belong in UI but ok.

{student.grades.reduce((a, b) => a + parseInt(b), 0) / student.grades.length}