Prueba algo como esto:

• establecer la matriz en el estado
• useEffect(..., []) para activar la carga de datos (solo una vez).
• establezca key={id} en la expansión de matriz asignada (o reaccione a las quejas por buenas razones que no se aplican en este caso particular).

 function StudentList() { const [students, setStudents] = useState(null); useEffect(() => { const url = "https://api.hatchways.io/assessment/students"; axios.get(url).then(({ data: { students } }) => setStudents(students)); }, []); if (!students) { return ( <div>loading...</div> ); } return ( <div className="StudentList"> <div className="row"> <div className="col"> { students.map(student => ( <StudentInfo key={student.id} info={student} /> )) } </div> </div> </div> ); }

y StudentInfo no necesita volver a cargar nada, solo formatea los datos que ya se obtuvieron

 export default function StudentInfo({ info }) { // edit: previous had { props: { info } } here, oops return ( <div className="StudentInfo"> <h1>{info.number}.</h1> <h2> Name: {info.first} {info.last} </h2> <h2>Email: {info.email}</h2> <h2>Company: {info.company}</h2> <h2>Skill: {info.skill}</h2> <h2>Average: {info.average}</h2> </div> ); }

Su componente secundario (StudentInfo) no está consumiendo los datos pasados por su componente principal. En lugar de volver a llamar a la API para obtener la información de los estudiantes, use la función prop.

 export default function StudentInfo({ data }) { const info = { number: data.id, first: data.firstName, last: data.lastName, email: data.email, company: data.company, skill: data.skill, average: data.grades[0] }; return ( <div className="StudentInfo"> <h1>{info.number}.</h1> <h2> Name: {info.first} {info.last} </h2> <h2>Email: {info.email}</h2> <h2>Company: {info.company}</h2> <h2>Skill: {info.skill}</h2> <h2>Average: {info.average}</h2> </div> ); }

Tema

Solo veo la primera entrada una y otra vez. No estoy seguro de cómo reiterar nueva información ya que solo será response.data.students[0]

Esto se debe a que el componente secundario StudentInfo vuelve a solicitar los datos de los estudiantes y solo accede al elemento 0 para cada estudiante asignado.

 export default function StudentInfo() { const [info, addInfo] = useState(" "); function setInfo(response) { addInfo({ number: response.data.students[0].id, // <-- (2) update state to first student! first: response.data.students[0].firstName, last: response.data.students[0].lastName, email: response.data.students[0].email, company: response.data.students[0].company, skill: response.data.students[0].skill, average: response.data.students[0].grades[0], }); } let url = "https://api.hatchways.io/assessment/students"; axios.get(url).then(setInfo); // <-- (1) fetch all students! return ( <div className="StudentInfo"> <h1>{info.number}.</h1> <h2> Name: {info.first} {info.last} </h2> <h2>Email: {info.email}</h2> <h2>Company: {info.company}</h2> <h2>Skill: {info.skill}</h2> <h2>Average: {info.average}</h2> </div> ); }

Solución

Solo necesita solicitar las evaluaciones de los estudiantes una vez en el componente principal y transmitir como apoyo los datos relevantes.

Ejemplo:

 function StudentList() { const [loaded, setLoaded] = useState(false); const [students, setStudent] = useState([]); useEffect(() => { const fetchData = async () => { try { const response = await axios.get(url); console.log(response.data); setStudent(response.data.students); } catch (error) { console.error(error); } finally { setLoaded(true); } }; fetchData(); }, []); return loaded ? ( <div className="StudentList"> <div className="row"> <div className="col"> {students.map(function (data) { return <StudentInfo data={data} key={data.id} />; })} </div> </div> </div> ) : ( "Fetching Student Assessments." ); }

...

 function StudentInfo({ data }) { const name = [data.firstName, data.lastName].join(" "); const average = ( data.grades.reduce((total, grade) => total + Number(grade), 0) / data.grades.length ).toFixed(2); return ( <div className="StudentInfo"> <h1>{data.id}.</h1> <h2>Name: {name}</h2> <h2>Email: {data.email}</h2> <h2>Company: {data.company}</h2> <h2>Skill: {data.skill}</h2> <h2>Average: {average}</h2> </div> ); }