better conditional operator than javascript itself

In this article, I've learned something but I'm also thinking about something.

Conditional Operator

Inline Conditional Operator is confusing example:

condition ? expr_if_true : expr_if_false

return (
  <div>
    <p>Text: {this.state.text}</p>

    {
      view
      ? null
      : (
        <p>
          <input
            onChange={this.handleChange}
            value={this.state.inputText} />
        </p>
      )
    }

  </div>
);

Or display a component based on its variable value

{
  view
  ? null
  : (
    <p>
      <input
        onChange={this.handleChange}
        value={this.state.inputText} />
    </p>
  )
}

If you have nested code 😰

return (
  <div>
    { condition1
      ? <Component1 />
      : ( condition2
        ? <Component2 />
        : ( condition3
          ? <Component3 />
          : <Component 4 />
        )
      )
    }
  </div>
);

I wonder if I can abstract this statement as a react component?

Like this

<If when={this.state.logic}>
  <p>↔️show component</p>
</If>

<If when={this.state.logic}>
  <p>↔️show component</p>
  <If when={this.state.logic}>
    <p>other component</p>
  </If>
</If>

I think it's more beautiful and readable

There is a lot more

<Switch value={value}>
  <Case when={condition}>
    <p>condition 1</p>
  </Case>
  <Case when={condition}>
    <p>condition 2</p>
  </Case>
  <Case when='c' children={<p>condition 3</p>}/>
  <Default children={<p>default component</p>}/>
</Switch>

Determines multiple conditions and can display default components

Iterate through the traversal array or object

<For of={['a', 'b', 'c']}>
  {(item, index) => (<p key={index}>{index}：{item}</p>)}
  <Default>default component</Default>
</For>

I created a repo for this

Do you have any ideas?

😮

Comments

[Shreya Dahal]

Reminds me of AngularJS. :D

[monsterooo]

vue 😁