Use both operators in conditional render React

Question

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!

Answer 1

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.

Answer 2

Use bracker () as && operator has higher presedence than ||

{((channel.length > 0 || sport.length > 0) && (ref.current == true) )&& <Error content={"Επιλέξτε φίλτρα"} />}