Conditional rendering of HTML elements in React?

Question

I am looking to render conditionally some HTML elements of my component.

I have a state variable Boolean, which can be either true (want to render text) or false (want to render nothing).

Inside the return param for the render functon, I have tried the following:

{this.state.boolean ? <div><h1>True</h1></div> : <div></div>}

{this.state.boolean && <div><h1>True</h1></div> || <div></div>}

But in both cases, the h1 element is rendered regardless of the state of Boolean!

Any ideas? Thanks in advance.

nah that should definitely work. Can you post a fiddle of your example or provide more code? — azium
– azium, Commented Nov 7, 2016 at 16:54
I can confirm the ternary expression works. Can you please check the type and value of your boolean? — Akshat Mahajan
– Akshat Mahajan, Commented Nov 7, 2016 at 18:52

Harkat · Accepted Answer · 2016-11-07 22:06:35Z

7

I usually do:

outputHTML(boolean) {
   if(!boolean) return null;
   return (
      <div>
        Something you wanted to show if the boolean was present
      </div>
   )
}

render() {
   return (
     <div>
      {this.outputHTML(this.state.boolean)}
     </div>
   )
 }

If the HTML you want to conditionally render has alot of conditions or is complex by nature. NOTE: Returning null will just render nothing.

Or the shorter, simpler version:

{this.state.boolean && <div><h1>True</h1></div>}

If it is not working please provide more context, maybe some error messages or something?

answered Nov 7, 2016 at 22:06

Harkat

1727 bronze badges

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

1 Comment

Noumenon Over a year ago

The shorter, simpler version is great.

Eric Kambestad · Accepted Answer · 2016-11-07 19:49:47Z

2

This definitely works, which sounds like what you've been doing.

Check the bin

https://jsbin.com/qomofonera/edit?html,js,output

class Demo extends React.Component{
  constructor(props){
    super(props);

    this.state = {
        boolean: false
    };
  }
  render(){
    return(
        <div>
            {this.state.boolean ? <div><h1>True</h1></div> : <div><h1>False</h1></div>}  
        </div>

    )
  }
}

answered Nov 7, 2016 at 19:49

Eric Kambestad

1496 bronze badges

Comments

Chad · Accepted Answer · 2016-11-07 18:50:24Z

1

Something like this doesn't work?

class Demo extends React.Component{
constructor(props){
    super(props);
    this.state = {
        boolean: false
    };
}
render(){
    return(
        <div>
            {this.state.boolean && <div><h1>True</h1></div>}  
        </div>

    )
}

}

answered Nov 7, 2016 at 18:50

Chad

6185 silver badges16 bronze badges

Comments

Erty Seidohl · Accepted Answer · 2016-11-07 19:27:14Z

0

I usually do something like the following (h/t to Chad whose code I stole & modified)

class Demo extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            boolean: false
        };
    }
    render(){
        var bool = null;
        if (this.state.boolean) {
            bool = (<div><h1>True</h1></div>);
        }
        return(
            <div>
                {bool}
            </div>
        );
    }
}

answered Nov 7, 2016 at 19:27

Erty Seidohl

4,5893 gold badges36 silver badges50 bronze badges

Collectives™ on Stack Overflow

Conditional rendering of HTML elements in React?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related