CODEWITHSUNDEEP
javascriptreactjs
Leo
Leo

Reputation: 23

ReactJS statement name

I am making a project using ReactJS and I am using a statement, but I do not know the name of it.

Here is a bit of my code so it might make sense.

function Login(props) {
            return (
                <form>
                    <input
                        type="text"
                        placeholder="username"
                        onChange={e=>props.app.setState({"username":e.currentTarget.value})}
                        value={props.app.state.username}
                    />
                    <input
                        type="password"
                        placeholder="password"
                        onChange={e=>props.app.setState({"password":e.currentTarget.value})}
                        value={props.app.state.password}
                    />
                    <button type="button" onClick={_=>props.app.loadTasks()}>Login</button>
                    {props.app.state.logged_in == -1 && <p className="error">Incorrect username or password</p>}
                    {props.app.state.logged_in >= -1 && <title>Task Keeper</title>}
                </form>
            );
        }

The exact thing I need a name for is this line here:

{props.app.state.logged_in == -1 && <p className="error">Incorrect username or password</p>}
{props.app.state.logged_in >= -1 && <title>Task Keeper</title>}

Like I am using them and I don't even know what they are called. And if possible explain how is working? I am only assuming is working like an if statement.

Upvotes: 2

Views: 50

Answers (2)

Michalis Garganourakis
Michalis Garganourakis

Reputation: 2930

What you are looking for is called Short-circuit evaluation and is analyzed really good on the MDN web docs.

Upvotes: 3

Ismael Padilla
Ismael Padilla

Reputation: 5566

First of all, an explanation of how this works, because it can be quite confusing when you're starting. When you do:

{props.app.state.logged_in >= -1 && <title>Task Keeper</title>}

You're telling React to render the result of the following operation:

props.app.state.logged_in >= -1
AND
<title>Task Keeper</title>

The ending result is that if props.app.state.logged_in >= -1 is true, then 

<title>Task Keeper</title>

is rendered, and if not, then nothing is rendered. That is similar to telling React:

if (props.app.state.logged_in >= -1)
    <title>Task Keeper</title>

Now as to what to call that concept in general, I'd say it's just conditional rendering. It works that way because of a quirk in javascript:

&& evaluates as the left hand side if the left hand side is false, otherwise it evaluates as the right hand side. Meaning that true && expression is equal to expression, and false && expression is equal to false. In general, The value of the && expression is the value of the subexpression last evaluated. This way of doing things is called short circuit evaluation.

Upvotes: 2

Related Questions