Hide Html Tag When Null

Question

I want to wrap html tags around react state value when the value is not null, ie.

{this.state.keyword!=null?' '+'<span>'+this.state.keyword+'</span>'+' ':''}

but now, the page renders even the this.state.keyword is blank. How to do it? Thanks.

What do you mean by "page renders even the this.state.keyword is blank"? — Mohit Singh
– Mohit Singh, Commented Feb 13, 2020 at 15:21
oh, It shows html tags on the webpage, such as ... — user788448
– user788448, Commented Feb 13, 2020 at 15:23
That means, this.state.keyword is not null (?) Maybe it's undefined. — wiesson
– wiesson, Commented Feb 13, 2020 at 15:24
You could reverse the conditional and ask if keyword is defined { this.state.keyword ? {this.state.keyword} : null } which means, if this.state.keyword is not null or undefined, render the span, otherwise render null. — wiesson
– wiesson, Commented Feb 13, 2020 at 15:28

Daniel B. · Accepted Answer · 2020-02-13 15:27:08Z

1

Use !this.state.keyword instead of this.state.keyword!=null

!this.state.keyword will check for all falsy values, like null, 0, empty string (not undefined though)

{!this.state.keyword ? '' : '<span>'+this.state.keyword+'</span>'+' '}

edited Feb 13, 2020 at 15:27

answered Feb 13, 2020 at 15:22

Daniel B.

2,6512 gold badges16 silver badges24 bronze badges

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

2 Comments

user788448 Over a year ago

I forgot to mention that this code is inside render{return( {this.state.keyword!=null?' '+''+this.state.keyword+''+' ':''} )} section.

Daniel B. Over a year ago

You can still use it inside a render method

Abhay Sehgal · Accepted Answer · 2020-02-13 15:32:50Z

0

You can achieve this by :

{ this.state.keyword? ' '+'<span>'+this.state.keyword+'</span>'+' ':''}

Explanation : in your code you're checking for null only whereas you can check for all falsy conditions (eg null, undefined, empty string, 0 and false) by using above condition

edited Feb 13, 2020 at 15:32

answered Feb 13, 2020 at 15:23

Abhay Sehgal

1,7432 gold badges17 silver badges22 bronze badges

4 Comments

wiesson Over a year ago

I guess that you just wrote something without explaining why it helps?

user788448 Over a year ago

@Abhay Sehgal your solution works for the textbox but not the dropdown box. If I have a dropwdown Subject, {this.state.subject?' '+''+this.state.subject+'':' '}, the page does not display this.state.subject value.

Abhay Sehgal Over a year ago

What is the value of subject at the time of render?

user788448 Over a year ago

this.state.subject value is ACC, BIO, etc.

user788448 · Accepted Answer · 2020-02-13 15:47:11Z

0

Duh, I moved tag out of the curly brace like this {this.state.keyword!=null?' '+this.state.keyword+' ':''} and solve the problem. Thanks everyone.

answered Feb 13, 2020 at 15:47

user788448

7971 gold badge17 silver badges39 bronze badges

Collectives™ on Stack Overflow

Hide Html Tag When Null

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related