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?
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