ReactJs - Conditional Rendering or hiding component

What's the de facto approach to choosing between conditional rendering or hiding the component with { display: 'none' }?

For the sake of discussion, let's say that I have a FilterComponent that holds the title of the filter, and a list of FilterItems, with name and amount.

In short, a FilterComponent could be:

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

+ Show More

When hitting Show More button, more FilterItems will be displayed, i.e.

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

Brown (17)

Pink (88)

White (55)

Red (32)

Purple (17)

- Show Less

Should I hide the FilterItems that are below the Show More? Or should I return null for those below and render them after updating the state with Show More?

asked Nov 22 '18 at 13:52

Mayhem

313317

add a comment |

What's the de facto approach to choosing between conditional rendering or hiding the component with { display: 'none' }?

For the sake of discussion, let's say that I have a FilterComponent that holds the title of the filter, and a list of FilterItems, with name and amount.

In short, a FilterComponent could be:

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

+ Show More

When hitting Show More button, more FilterItems will be displayed, i.e.

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

Brown (17)

Pink (88)

White (55)

Red (32)

Purple (17)

- Show Less

Should I hide the FilterItems that are below the Show More? Or should I return null for those below and render them after updating the state with Show More?

asked Nov 22 '18 at 13:52

Mayhem

313317

add a comment |

What's the de facto approach to choosing between conditional rendering or hiding the component with { display: 'none' }?

For the sake of discussion, let's say that I have a FilterComponent that holds the title of the filter, and a list of FilterItems, with name and amount.

In short, a FilterComponent could be:

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

+ Show More

When hitting Show More button, more FilterItems will be displayed, i.e.

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

Brown (17)

Pink (88)

White (55)

Red (32)

Purple (17)

- Show Less

Should I hide the FilterItems that are below the Show More? Or should I return null for those below and render them after updating the state with Show More?

asked Nov 22 '18 at 13:52

Mayhem

313317

What's the de facto approach to choosing between conditional rendering or hiding the component with { display: 'none' }?

For the sake of discussion, let's say that I have a FilterComponent that holds the title of the filter, and a list of FilterItems, with name and amount.

In short, a FilterComponent could be:

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

+ Show More

When hitting Show More button, more FilterItems will be displayed, i.e.

Color

Blue (19)

Yellow (17)

Orange (3)

Black (7)

Green (10)

Brown (17)

Pink (88)

White (55)

Red (32)

Purple (17)

- Show Less

Should I hide the FilterItems that are below the Show More? Or should I return null for those below and render them after updating the state with Show More?

reactjs conditional-rendering

asked Nov 22 '18 at 13:52

Mayhem

313317

asked Nov 22 '18 at 13:52

Mayhem

313317

asked Nov 22 '18 at 13:52

Mayhem

313317

asked Nov 22 '18 at 13:52

Mayhem

313317

asked Nov 22 '18 at 13:52

Mayhem

313317

add a comment |

7 Answers
7

active

oldest

votes

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (

 <React.Fragment>

   <All/><The/><Other/><Components/>

</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

answered Nov 22 '18 at 15:12

Neal

298111

add a comment |

I would go for the "updating state" approach. That way you always have the actual filterItems that is showing in the state. So your components state is in sync and represents the current UI that is showing.

Guess there's no right or wrong in this question though =)

answered Nov 22 '18 at 14:00

weibenfalk

54617

add a comment |

It would make more sense to not render the items that should not be shown until after the Show More has been clicked, and the state has updated. This way you can handle how many items should be shown by default before clicking Show More. This way instead of applying inline styles, or a special class to certain elements, you can use the exact same logic to all FilterItems, but only render X of them.

answered Nov 22 '18 at 14:01

Naismith

1346

add a comment |

Generally in React it is better to not render something than to render it as hidden. Here is one related discussion:
https://discuss.reactjs.org/t/conditional-rendering-or-toggling-hidden-classes/2535/6

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

add a comment |

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ;

{ isHidden &&



...

answered Nov 22 '18 at 15:37

Alican Çelik

333

add a comment |

Generally, there is no significant performance differences between display: none and conditional rendering, because the browser's behaviour in both cases is nearly the same. The main difference is that if you use display: none, then node is not removing from the DOM tree, which forces some CSS pseudo-selectors like :last-child to consider a hidden node as last-child and so on. So, it is not performance-related, but mostly CSS-related. Both of approaches are ok for use, I suppose :)

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

add a comment |

-1

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (

    <div>

        <Header />

        <If condition={ age >= drinkingAge }>

            <Then><span className="ok">Have a beer, {name}!</span></Then>

            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>

        </If>

        <Footer />

    </div> )

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53432498%2freactjs-conditional-rendering-or-hiding-component%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

7 Answers
7

active

oldest

votes

7 Answers
7

active

oldest

votes

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (

 <React.Fragment>

   <All/><The/><Other/><Components/>

</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

answered Nov 22 '18 at 15:12

Neal

298111

add a comment |

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (

 <React.Fragment>

   <All/><The/><Other/><Components/>

</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

answered Nov 22 '18 at 15:12

Neal

298111

add a comment |

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (

 <React.Fragment>

   <All/><The/><Other/><Components/>

</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

answered Nov 22 '18 at 15:12

Neal

298111

I think there are a few ways to accomplish what you need. However, this seems to be the most practised:

{myConditionIsTrue && <MyComponent />}

In your case, it makes sense to use state. I would have a prop inside FilterComponent called showFullList

{this.state.showFullList && (

 <React.Fragment>

   <All/><The/><Other/><Components/>

</React.Fragment>)}

Just be weary, this mechanism is actually removing/adding to the DOM.

answered Nov 22 '18 at 15:12

Neal

298111

answered Nov 22 '18 at 15:12

Neal

298111

answered Nov 22 '18 at 15:12

Neal

298111

answered Nov 22 '18 at 15:12

Neal

298111

add a comment |

Guess there's no right or wrong in this question though =)

answered Nov 22 '18 at 14:00

weibenfalk

54617

add a comment |

Guess there's no right or wrong in this question though =)

answered Nov 22 '18 at 14:00

weibenfalk

54617

add a comment |

Guess there's no right or wrong in this question though =)

answered Nov 22 '18 at 14:00

weibenfalk

54617

Guess there's no right or wrong in this question though =)

answered Nov 22 '18 at 14:00

weibenfalk

54617

answered Nov 22 '18 at 14:00

weibenfalk

54617

answered Nov 22 '18 at 14:00

weibenfalk

54617

answered Nov 22 '18 at 14:00

weibenfalk

54617

add a comment |

answered Nov 22 '18 at 14:01

Naismith

1346

add a comment |

answered Nov 22 '18 at 14:01

Naismith

1346

add a comment |

answered Nov 22 '18 at 14:01

Naismith

1346

answered Nov 22 '18 at 14:01

Naismith

1346

answered Nov 22 '18 at 14:01

Naismith

1346

answered Nov 22 '18 at 14:01

Naismith

1346

answered Nov 22 '18 at 14:01

Naismith

1346

add a comment |

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

add a comment |

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

add a comment |

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

answered Nov 22 '18 at 14:02

Ryan Cogswell

4,722523

add a comment |

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ;

{ isHidden &&



...

answered Nov 22 '18 at 15:37

Alican Çelik

333

add a comment |

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ;

{ isHidden &&



...

answered Nov 22 '18 at 15:37

Alican Çelik

333

add a comment |

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ;

{ isHidden &&



...

answered Nov 22 '18 at 15:37

Alican Çelik

333

You can change initial state value of isHidden or something like that . When you click button value will be oppasite of before situtation . And when you wants to render you should give condition ;

{ isHidden &&



...

answered Nov 22 '18 at 15:37

Alican Çelik

333

answered Nov 22 '18 at 15:37

Alican Çelik

333

answered Nov 22 '18 at 15:37

Alican Çelik

333

answered Nov 22 '18 at 15:37

Alican Çelik

333

add a comment |

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

add a comment |

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

add a comment |

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

answered Nov 22 '18 at 15:40

Levitator Imbalance

573418

add a comment |

-1

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (

    <div>

        <Header />

        <If condition={ age >= drinkingAge }>

            <Then><span className="ok">Have a beer, {name}!</span></Then>

            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>

        </If>

        <Footer />

    </div> )

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

add a comment |

-1

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (

    <div>

        <Header />

        <If condition={ age >= drinkingAge }>

            <Then><span className="ok">Have a beer, {name}!</span></Then>

            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>

        </If>

        <Footer />

    </div> )

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

add a comment |

-1

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (

    <div>

        <Header />

        <If condition={ age >= drinkingAge }>

            <Then><span className="ok">Have a beer, {name}!</span></Then>

            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>

        </If>

        <Footer />

    </div> )

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

You could use a library called react-if. This library helps you wether to render or not based on a a condition.

Here is an example:

const Bar = ({ name, age, drinkingAge }) => (

    <div>

        <Header />

        <If condition={ age >= drinkingAge }>

            <Then><span className="ok">Have a beer, {name}!</span></Then>

            <Else><span className="not-ok">Sorry, {name}, you are not old enough.</span></Else>

        </If>

        <Footer />

    </div> )

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

edited Nov 22 '18 at 15:13

answered Nov 22 '18 at 15:06

Ramiro Estrella

answered Nov 22 '18 at 15:06

Ramiro Estrella

answered Nov 22 '18 at 15:06

Ramiro Estrella

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu