如何使用React动态显示每个类别的图标？

import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faMusic, faFilm } from '@fortawesome/free-solid-svg-icons';

class IconDisplay extends Component {
  constructor(props) {
    super(props);
    this.state = {
      icons: [
        { name: 'Coffee', category: 'Food' },
        { name: 'Music', category: 'Entertainment' },
        { name: 'Film', category: 'Entertainment' }
      ]
    };
  }

  render() {
    return (
      <div>
        {this.state.icons.map(icon => {
          let iconComponent;
          switch (icon.category) {
            case 'Food':
              iconComponent = <FontAwesomeIcon icon={faCoffee} />;
              break;
            case 'Entertainment':
              iconComponent = <FontAwesomeIcon icon={faMusic} />;
              break;
            default:
              iconComponent = null;
          }
          return (
            <div key={icon.name}>
              <span>{icon.name}: </span>
              {iconComponent}
            </div>
          );
        })}
      </div>
    );
  }
}

export default IconDisplay;