Question 220644 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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!

Tags:

2

Answers


  1. 0

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

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

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search