Improve Assessment - Student Profiles

We noticed you assumed IDs are always integers, start at 1, and only increment by 1. This breaks when the IDs are not integers and/or do not begin at 1.

You calculate the average each time the student component re-renders. It would be more efficient to memoize this value or store it in a higher-level component.

    getStudentsList()
      .then((response) =>
        response.students.map((student, index) => {
          return { ...student, index: index, averageGrade: countAverageNumber(student.grades) }
        })
      )
      .then((data) => setStudentData(data))
        //const index = data.id - 1
        const index = data.index

Great performance for a frontend application overall. As a bonus, would have liked to see more advanced features such as useCallback and memoizing components.

  const countAverageNumber = React.useCallback((array) => {
    return (
      array.reduce((accumulator, currentValue) => Number(accumulator) + Number(currentValue)) / array.length
    ).toFixed(3)
  }, [])

We noticed you used the ternary operator to render a React component only if a condition is met and returned null otherwise. In cases like this, it's cleaner to use the && operator instead.

          {/* {isExpand ? (
            <div>
              {data.grades.map((grades, index) => (
                <p key={index}>{`Test ${index + 1}: ${grades}%`}</p>
              ))}
            </div>
          ) : null} */}
          {isExpand && (
            <div>
              {data.grades.map((grades, index) => (
                <p key={index}>{`Test ${index + 1}: ${grades}%`}</p>
              ))}
            </div>
          )}

We noticed that the names you choose like copyArr, data for some of your variables and functions were non-descriptive or inaccurate.

so I changed it from copyArr to copyArray.

To improve accessibility, all img tags should have an alt attribute with meaningful content .

 //<img src={data.pic} alt='student-avatar' className='student-avatar' />
 <img src={data.pic} alt={fullName + " Avatar"} className='student-avatar' />