CODEWITHSUNDEEP
javascriptreactjseslintconditional-operator
neoslo
neoslo

Reputation: 423

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

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]);

Upvotes: 2

Views: 1353

Answers (2)

epascarello
epascarello

Reputation: 207501

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 }
})

Upvotes: 3

Sushanth --
Sushanth --

Reputation: 55740

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.

Upvotes: 1

Related Questions