JSX adding attribute with no value with conditional statement

Question

So in JSX I know how I can use an conditional on class names etc or where the attribute has a value.

So if I'm doing class="something" or style="something" etc. The issue I'm having is i'm unsure how I'd do a conditional when adding the hidden attribute.

Example;

  className={classNames({
    'hidden': true,
    'visible': props.showAll,
  })}

This will add a class depending on the value of showAll.

But the hidden attribute is literally just <p hidden>this text is hidden</p>.

How would I go about adding a conditional into my JSX react component that renders an attribute but no value?

hsz · Accepted Answer · 2017-11-14 11:56:14Z

3

Simply try with:

<p hidden={!showAll}>

Attribute hidden with no value is concidered as true, so you can easily pass a boolean value.

answered Nov 14, 2017 at 11:56

hsz

153k63 gold badges268 silver badges320 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pourmesomecode Over a year ago

Ahh so hidden="" returns true, the same as just adding the hidden attribute. Thanks!

CodeZombie · Accepted Answer · 2017-11-14 12:30:32Z

0

If the data is present then show otherwise do not append the p tag on dom.So try this

{this.props.showAll && <p>this.props.showAll</p>}

answered Nov 14, 2017 at 12:30

CodeZombie

2,0973 gold badges19 silver badges30 bronze badges

Collectives™ on Stack Overflow

JSX adding attribute with no value with conditional statement

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related