Use both operators in conditional render React

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!

>Solution :

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 trenter code hereue for the entire block to return true.

You may like to use some alert()to trace the status.