I am trying to create a condition in order to render an error message in a React App.
This is my code {channel.length > 0 || sport.length > 0 && ref.current == true && <Error content={"Επιλέξτε φίλτρα"} />}.
I am not getting back the Error component even though the conditions are met. Thanks in advance!
2 Answers
You must put OR and AND operators in the order of their Precdence. AND (&&) has higher Precedence thatn OR(||). So you may like to put the OR (||) criterion in paranthesis and leave the rest like that. So it should be
{(channel.length > 0 || sport.length > 0) && ref.current == true && <Error content={"Επιλέξτε φίλτρα"} />}
In the above modification, (channel.length > 0 || sport.length > 0) has to be true for the entire block to return true.
You may like to use some alert()to trace the status.
Comments
Use bracker () as && operator has higher presedence than ||
{((channel.length > 0 || sport.length > 0) && (ref.current == true) )&& <Error content={"Επιλέξτε φίλτρα"} />}
iforswitchstatements.const showError = a || b && cand then rendering with{ showError && <Error />}would generally be a cleaner approach and would avoid the issue you're seeing.channel.length > 0is true, then rest of the conditions would not be checked. Better to use the solution suggested in the comment above.