Where to put javascript code with styled components?

Question

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?

Does this answer your question? [Arrow function without curly braces](https://stackoverflow.com/questions/39629962/arrow-function-without-curly-braces) — Emile Bergeron, Dec 23 '21 at 17:41

David · Accepted Answer · 2021-12-23T17:19:19.520

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

Where to put javascript code with styled components?

1 Answers1