reactjsconditional-rendering

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

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