EmployeeList.js

import React, { useMemo } from 'react';

const EmployeeList = ({ employees, positionFilter }) => {
  const filteredEmployees = useMemo(() => {
    return employees.filter(employee => employee.position === positionFilter);
  }, [employees, positionFilter]);

  return (
    <div>
      <h2>Employee List</h2>
      <ul>
        {filteredEmployees.map(employee => (
          <li key={employee.id}>
            {employee.name} - {employee.position}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default EmployeeList;