How to have conditional elements and keep DRY with Facebook React s JSX

0 votes

How do I optionally include an element in JSX? Here is an example using a banner that should be in the component if it has been passed in. What I want to avoid is having to duplicate HTML tags in the if statement.

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}
Jun 4, 2020 in Angular by kartik
• 37,520 points
596 views

1 answer to this question.

0 votes

Hello @kartik,

Let's define a simple helping If component:

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

And use it this way:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Hope it helps!!

To know more about React, We highly recommend to join React Training online today.

Thank You!!

answered Jun 4, 2020 by Niroj
• 82,880 points

Related Questions In Angular

0 votes
1 answer

How to return raw string with ApiController?

Hello @kartik, You could have your Web Api ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
4,504 views
0 votes
1 answer

How to know tools and bundlers after create a new workspace or a project in angular?

Hello @sajal, When you create projects and workspaces ...READ MORE

answered Aug 6, 2020 in Angular by Niroj
• 82,880 points
787 views
0 votes
1 answer

How to make FileReader work with Angular?

Hello @kartik, First you have to specify the ...READ MORE

answered Sep 8, 2020 in Angular by Niroj
• 82,880 points
26,713 views
0 votes
1 answer

How compile, controller, pre-linking and post linking works in Angularjs?

Explanation of compile and link process don't ...READ MORE

answered Jan 31, 2020 in Angular by Niroj
• 82,880 points
1,390 views
0 votes
1 answer

Error:Unable to access React instance (this) inside event handler

Hello @kartik, You can use an arrow function together with ...READ MORE

answered Jun 4, 2020 in Angular by Niroj
• 82,880 points
1,904 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,880 points
4,723 views
0 votes
1 answer

Explain general Routing workflow between several web pages?

hii, Routing is just another way of fixing some content ...READ MORE

answered Feb 10, 2020 in Angular by Niroj
• 82,880 points
693 views
0 votes
1 answer

How can we Create Multiple Where Clause Query Using Laravel Eloquent?

Hii, You can use Conditions using Array: $users = User::where([ ...READ MORE

answered Mar 30, 2020 in Laravel by Niroj
• 82,880 points
16,649 views
0 votes
1 answer

How to loop inside React JSX?

Hello @kartik, You're just calling JavaScript functions. You ...READ MORE

answered Jul 22, 2020 in Angular by Niroj
• 82,880 points
1,610 views
0 votes
1 answer

How to allow download of .json file with ASP.NET?

Hello @kartik, If you want to manually add ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,880 points
2,087 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP