Expected an assignment or function call and instead saw an expression on ternary

Question

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

I tried returning an empty div at the end of my ternary operator but still get the same error.

    React.useEffect(() => {
        if (response && !isLoading) {
            showNotification({
                variant: "success",
                message: `Your invitation ${
                    name.props ? name.props.children : name
                }-${data} was successfully sent.`
            });
            closeAlert();
            viewName === "GetAllData"
                ? dispatch({
                      type: "FETCH_DATA",
                      payload: { loading: true }
                  })
                : dispatch({
                      type: "FETCH_AVAILABLE_STAFF",
                      payload: { loading: true }
                  });
        }
        return <div />;
    }, [response, isLoading]);

Answer 1

It is complaining about how you use a ternary instead of using an if/else statement to do the work. The code is expecting

if (viewName === "GetAllData") {
  dispatch({
    type: "FETCH_DATA",
    payload: { loading: true }
  })
} else {
  dispatch({
    type: "FETCH_AVAILABLE_STAFF",
    payload: { loading: true }
  });
}

If you want to use a ternary you need to do it with the objects, since only thing that is different is the type, use it on the type.

dispatch({
  type: viewName === "GetAllData" ? "FETCH_DATA" : "FETCH_AVAILABLE_STAFF",
  payload: { loading: true }
})

Answer 2

The problem is not with returning the div ( why even return a div ?) but rather,

viewName === 'GetAllData'
  ? dispatch({
      type: 'FETCH_DATA',
      payload: { loading: true },
    })
  : dispatch({
      type: 'FETCH_AVAILABLE_STAFF',
      payload: { loading: true },
    });

The ternary operation above is an expression. Change that to an if block.

You need not return anything from useEffect in this use case. Also useEffect will not render anything as it is a hook in place to perform side effects.