September 4 React Stuffs

App.jsx

import { Fragment, useState } from 'react';
import { StudentInfo } from './StudentInfo'; // named import
// import StudentInfo from './StudentInfo'; // default import
import './App.css';

const studentList = [
  {
    firstName: 'Misty',
    lastName: 'Knight',
    sId: '234',
    school: 'Queens College',
    major: 'Law',
  },
  {
    firstName: 'Jessica',
    lastName: 'Jones',
    sId: '434',
    school: 'Brooklyn College',
    major: 'CS',
  },
  {
    firstName: 'Colleen',
    lastName: 'Wing',
    sId: '233',
    school: 'Queens College',
    major: 'CS',
  },
  {
    firstName: 'Dare',
    lastName: 'Devil',
    sId: '876',
    school: 'CCNY',
    major: 'Law',
  },
  {
    firstName: 'Luke',
    lastName: 'Cage',
    sId: '323',
    school: 'CCNY',
    major: 'Math',
  },
];
function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <div>
        <h1>Welcome to CTP</h1>
        <p>List of Students</p>
        {studentList.map((student) => (
          <StudentInfo key={student.sId} {...student} />
        ))}
      </div>
    </>
  );
}

export default App;

StudentInfo.jsx

export function StudentInfo({ lastName, firstName, sId, school, major }) {
  return (
    <div>
      <div>
        {lastName}, {firstName}
      </div>
      <ul>
        <li>
          <strong>ID:</strong> {sId}
        </li>
        <li>
          <strong>School:</strong> {school}
        </li>
        <li>
          <strong>Major:</strong> {major}
        </li>
      </ul>
    </div>
  );
}