Conditional Components

[seanyriver]

Feature

What is the current behavior?

Often we will use expressions like this:

{ !x ? null : <Component title={x.title} /> }

What is the desired behavior?

We would like to have expressive components such as

<When c={x}>
   <Component title={x.title} />
</When>

In many cases this generic syntax is preferred over an explicit child component or pure function which knows about what it is supposed to render.

The issue is that this will evaluate the children, even if they ultimately are not returned (since they are passed as children to the When component).

What is desired is for the syntax above to be able to behave exactly like a conditional expression, in that the contained children are not actually processed at all unless a condition is met. In reality the component could be something else entirely such as <SuperUser /> which will only process and render the children if the current user is a super user, or <Morning /> to only process and render items between 8 AM and 11 AM (or similar). The key thing is that we do not want the props passed into the children, or the children themselves produced, unless a condition has been satisfied.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

Presumably any version of React.

[chasestarr]

Hi @seanyriver, consider using this npm package react-if. Or look at that project's github repo for how to implement some version of the functionality in your application.

[seanyriver]

@chasestarr thank you for the note -- just a bit more detail on this as syntactically, the react-if library is spot-on the conditional concept. What I am imagining is something that ultimately affects the "syntactic sugar" and uses short circuit logic.

With something like a When component:

<When c={x}>Hello <MyComponent title={x.title} /> World</When>

This would produce the following.

React.createElement(
  When,
  { c: x },
  "Hello ",
  React.createElement(MyComponent, { title: x.title }),
  " World"
);

The problem is that the children are actually evaluated including for example x.title.

A very rough and incomplete concept here but to convey my thoughts ... I am imagining something like:

<?{x}>Hello <Component title={x.title} /> World</?>

This would produce something akin to:

x && React.createElement(
  React.Fragment,
  { },
  "Hello ",
  React.createElement(MyComponent, { title: x.title }),
  " World"
);

Curious what your thoughts are on the (perceived) problem and any potential solutions.

[jamiewinder]

The way I handle this is to allow a node-returning function to be specified for the children. As far as I can see the react-if library already allows for this too:

<If condition={count === 1}>
    <Then>
        {() => '1 item'}
    </Then>
    <Else>
        {() => count + ' items'}
    </Else>
</If>

(You can of course move these function outside of the JSX to avoid them being recreated)

I'm ambivalent to the proposal itself. JSX is currently very straightforward / predictable in how evaluation works and having a special component that doesn't work in the same way could be confusing.

[gaearon]

This has been discussed many times. Please search past discussions. It's unlikely we'll introduce something like what you propose but we might introduce syntax sugar for embedding generator expressions like facebook/jsx#99 in the future.

[seanyriver]

Thank you for the additional feedback @jamiewinder and @gaearon. Very helpful ideas and resources.

[awinogradov]

@seanyriver you can try to use smth like this https://github.com/awinogradov/condicom