Can't figure out where to place this code for my sorting of employees in my styled component. Usually I would just place code above the return statement of a functional component. But React isn't having it.

import styled from "styled-components";
import EmployeeAvatar from "../EmployeeAvatar";

const Styles = styled.div`
  .employee-finder-content {
    width: 1440px;
    background-color: rgb(240, 240, 240);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
`;

export const Content = ({
  employees,
  filtered,
  grabEmployeeData,
  updateDisplayProfile,
}) => (

    employees.sort((a, b) => {
        if (a.name > b.name) {
        return 1;
        } else {
        return -1;
        }   
    })


  <Styles>
    <div onClick={updateDisplayProfile} className={"employee-finder-content"}>
      {filtered === null
        ? employees.map((person) => {
            return (
              <EmployeeAvatar
                name={person.name}
                title={person.title}
                // displayEmployeesProfile={displayEmployeesProfile}
                grabEmployeeData={grabEmployeeData}
                id={person.id}
                key={person.id}
              />
            );
          })
        : filtered.map((person) => {
            return (
              <EmployeeAvatar
                name={person.name}
                title={person.title}
                // displayEmployeesProfile={displayEmployeesProfile}
                grabEmployeeData={grabEmployeeData}
                id={person.id}
                key={person.id}
              />
            );
          })}
    </div>
  </Styles>
);

I tried wrapping the employees.sort in curly braces {} and it still doesn't work. Any thoughts?

CodePudding user response：

You're trying to put multiple statements (with an implicit return) inside the Content function without wrapping that function in curly braces. Wrap it in curly braces and add a return statement:

export const Content = ({
  employees,
  filtered,
  grabEmployeeData,
  updateDisplayProfile,
}) => { // <--- here
  
  employees.sort... // etc.

  return (
    <Styles>
      //...
    </Styles>
  );

}; // <--- and here