How can the renderEmployees function be optimized?

Question

React

const renderEmployees = () => {

        const sortEmployees = employees.sort((a, b) => a.firstName > b.firstName ? 1 : -1);
    
        let arr_EN = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    
        const A = sortEmployees.filter(item => item.firstName[0] === 'A')
        const B = sortEmployees.filter(item => item.firstName[0] === 'B')
        const C = sortEmployees.filter(item => item.firstName[0] === 'C')
        const D = sortEmployees.filter(item => item.firstName[0] === 'D')
        const E = sortEmployees.filter(item => item.firstName[0] === 'E')
        const F = sortEmployees.filter(item => item.firstName[0] === 'F')
        const G = sortEmployees.filter(item => item.firstName[0] === 'G')
        const H = sortEmployees.filter(item => item.firstName[0] === 'H')
        const I = sortEmployees.filter(item => item.firstName[0] === 'I')
        const J = sortEmployees.filter(item => item.firstName[0] === 'J')
        const K = sortEmployees.filter(item => item.firstName[0] === 'K')
        const L = sortEmployees.filter(item => item.firstName[0] === 'L')
        const M = sortEmployees.filter(item => item.firstName[0] === 'M')
        const N = sortEmployees.filter(item => item.firstName[0] === 'N')
        const O = sortEmployees.filter(item => item.firstName[0] === 'O')
        const P = sortEmployees.filter(item => item.firstName[0] === 'P')
        const Q = sortEmployees.filter(item => item.firstName[0] === 'Q')
        const R = sortEmployees.filter(item => item.firstName[0] === 'R')
        const S = sortEmployees.filter(item => item.firstName[0] === 'S')
        const T = sortEmployees.filter(item => item.firstName[0] === 'T')
        const U = sortEmployees.filter(item => item.firstName[0] === 'U')
        const V = sortEmployees.filter(item => item.firstName[0] === 'V')
        const W = sortEmployees.filter(item => item.firstName[0] === 'W')
        const X = sortEmployees.filter(item => item.firstName[0] === 'X')
        const Y = sortEmployees.filter(item => item.firstName[0] === 'Y')
        const Z = sortEmployees.filter(item => item.firstName[0] === 'Z')
        
        return (
          <div className='empoloyees__alf'>
            {
              arr_EN.map(item => {
                switch (item) {
                  case 'A':
                    return <div className='empoloyees__alf-item'>{item} {helper(A)}</div>
                  
                  case 'B':
                    return <div className='empoloyees__alf-item'>{item} {helper(B)}</div>
    
                  case 'C':
                    return <div className='empoloyees__alf-item'>{item} {helper(C)}</div>
    
                  case 'D':
                    return <div className='empoloyees__alf-item'>{item} {helper(D)}</div>
    
                  case 'E':
                    return <div className='empoloyees__alf-item'>{item} {helper(E)}</div>
    
                  case 'F':
                    return <div className='empoloyees__alf-item'>{item} {helper(F)}</div>
    
                  case 'G':
                    return <div className='empoloyees__alf-item'>{item} {helper(G)}</div>
    
                  case 'H':
                    return <div className='empoloyees__alf-item'>{item} {helper(H)}</div>
    
                  case 'I':
                    return <div className='empoloyees__alf-item'>{item} {helper(I)}</div>
    
                  case 'J':
                    return <div className='empoloyees__alf-item'>{item} {helper(J)}</div>
    
                  case 'K':
                    return <div className='empoloyees__alf-item'>{item} {helper(K)}</div>
    
                  case 'L':
                    return <div className='empoloyees__alf-item'>{item} {helper(L)}</div>
    
                  case 'M':
                    return <div className='empoloyees__alf-item'>{item} {helper(M)}</div>
    
                  case 'N':
                    return <div className='empoloyees__alf-item'>{item} {helper(N)}</div>
    
                  case 'O':
                    return <div className='empoloyees__alf-item'>{item} {helper(O)}</div>
    
                  case 'P':
                    return <div className='empoloyees__alf-item'>{item} {helper(P)}</div>
    
                  case 'Q':
                    return <div className='empoloyees__alf-item'>{item} {helper(Q)}</div>
    
                  case 'R':
                    return <div className='empoloyees__alf-item'>{item} {helper(R)}</div>
    
                  case 'S':
                    return <div className='empoloyees__alf-item'>{item} {helper(S)}</div>
    
                  case 'T':
                    return <div className='empoloyees__alf-item'>{item} {helper(T)}</div>
    
                  case 'U':
                    return <div className='empoloyees__alf-item'>{item} {helper(U)}</div>
    
                  case 'V':
                    return <div className='empoloyees__alf-item'>{item} {helper(V)}</div>
    
                  case 'W':
                    return <div className='empoloyees__alf-item'>{item} {helper(W)}</div>
    
                  case 'X':
                    return <div className='empoloyees__alf-item'>{item} {helper(X)}</div>
    
                  case 'Y':
                    return <div className='empoloyees__alf-item'>{item} {helper(Y)}</div>
    
                  case 'Z':
                    return <div className='empoloyees__alf-item'>{item} {helper(Z)}</div>
    
                
                  default:
                    break;
                }
              })
            }
          </div>
        )
      }

      function helper(arr) {
        return (
          <ul className='employees__list'>
              {
                arr.length > 0 
                  ? arr.map(item => {
                    return (
                      <li key={item.id}>
                        {item.firstName} {item.lastName}
                        <form className='employess__form'>
                          <input type='radio' name='contact' defaultChecked value='not active' onChange={(e) => handlerInput(item, e)} />
                          <label>not active</label>
                          <input type='radio' name='contact' value='active' onChange={(e) => handlerInput(item, e)} />
                          <label>active</label>
                        </form>
                      </li>
                    )
                  })
                  : <div>No Employees</div>
              }
            </ul>
        )
      }

Answer 1

const renderEmployees = () => {
    const alphEmployees = [...employees]
      .sort((a, b) => a.firstName > b.firstName ? 1 : -1)
      .reduce((acc, emp) => {
        const { firstName: [firstLetter] } = emp;
        acc[firstLetter] ??= [];
        acc[firstLetter].push(emp);
        return acc;
      }, {});

    let arr_EN = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
    
    return (
          <div className='empoloyees__alf'>
            {arr_EN.map(item => <div className='empoloyees__alf-item'>{item} {helper(alphEmployees[item] ?? [])}</div>)}
          </div>
        )
  }