no-unused-expressions on ternary

Question

Here I have an error that says:

Expected an assignment or function call and instead saw an expression no-unused-expressions

I want onClick put my const handleCompleted with ternary. I think it's just a problem with {} or (), I did lots of things but I always have this error message.

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
     const [completed, setCompleted] = useState(false);      

     const handleCompleted = () => {
         const newFilters = { ...filters };
         {
          completed
            ? (setCompleted(false),
              (newFilters.status.completed = ""),
              setFilters(newFilters))
            : (setCompleted(true),
              (newFilters.status.completed = "Completed"),
              setFilters(newFilters));
         }
        };

       return(...);
};

Answer 1

I'm pretty sure, it has to do with the weird ternary construction. It's probably just an error in ESLint.

BUT: A ternary operator should be used for conditionally assigning values to variables.

Although it CAN be used as a replacement for if () , it SHOULD NOT be used that way.

The reason is simple: It's unreadable and is prone to unwanted side effects that are hard to debug. Just don't ever use ternaries as a replacement for if () .

Try this instead. I think you find it even more readable.

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
  const [completed, setCompleted] = useState(false);
  const handleCompleted = () => {
    const newFilters = { ...filters };
    // this is how you should use ternaries:
    newFilters.status.completed = completed ? '' : 'Completed'
    setCompleted(!completed)
    setFilters(newFilters)
  };

  return(...);
};

Answer 2

There is some redundant logic ( setFilters(newFilters) twice), in addition, you only made a shallow copy of filters ( {...filters} ), therefore you mutate state ( newFilters.status.completed =... ).

I would rewrite it to something like:

const Filters = ({ listTask, setListTask, filters, setFilters }) => {
  const [completed, setCompleted] = React.useState(false);

  const handleCompleted = () => {
    setFilters((filters) => ({
      ...filters,
      status: { ...filters.status, completed: completed ? "" : "Completed" }
    }
    ));
    setCompleted(prev => !prev);
  };

  return <>...</>;
};