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

user_11548117 0
Viewed 815

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>
  ))}
reactjs javascript
2 Answers

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}
user_21461250

Create function that returns average from the array:

getAverage(grades){
    for( var i = 0; i < grades.length; i++ ){
        sum += parseInt( grades[i], 10 ); 
    }
    var avg = sum/grades.length;
    return avg;
}

and call it where you display average:

<p className="card-text">Average: {this.getAverage(student.grades)}</p>
user_21319250
Related