score:0

Accepted answer
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>
  );
}

score:0

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>
  );
}

score:0

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>
  );
}

Related Query

More Query from same tag