ReactJS statement name

Question

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.

Does this post answers to your question ? https://stackoverflow.com/questions/4446433/how-does-javascript-logical-assignment-work — Hurobaki, Jan 05 '20 at 23:55
In JSX, this is known as [inline conditional rendering](https://reactjs.org/docs/conditional-rendering.html#inline-if-with-logical--operator). — Emile Bergeron, Jan 06 '20 at 00:07

Michalis Garganourakis · Answer 1 · 2020-01-06T00:22:33.160

3

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

edited Jan 06 '20 at 00:22

answered Jan 06 '20 at 00:07

Michalis Garganourakis

2,872
1
11
24

score 2 · Accepted Answer · answered Jan 05 '20 at 23:58

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.

ReactJS statement name

2 Answers2