props

import { Character, Characterlist } from './components/CharacterList';

function App() {
  const Characters: Character[] = [
    {
      id: 1,
      name: '桜木花道',
      grade: 1,
      height: 189.2,
    },
    {
      id: 2,
      name: '流川',
      grade: 1,
      height: 187,
    },
    {
      id: 3,
      name: '宮城',
      grade: 2,
    },
  ];

  return (
    <>
      <Characterlist school="湘北高校" characters={Characters} />
    </>
  );
}

export default App;

import { FC } from 'react';

export type Character = {
  id: number;
  name: string;
  grade: number;
  height?: number;
};

type Props = {
  school: string;
  characters: Character[];
};

export const Characterlist: FC<Props> = (props) => {
  const { school, characters } = props;
  return (
    <>
      <p>{school}</p>
      {characters.map((chara) => {
        return (
          <div key={chara.id}>
            <h3>{`名前：${chara.name}`}</h3>
            <p>{`学年：${chara.grade}`}</p>
            <p>{`身長：${chara.height ?? '???'}cm`}</p>
          </div>
        );
      })}
    </>
  );
};