React with multi element conditionals

Question

I am converting an existing application into ReactJS. I have found something difficult to do well in ReactJS. Below is what I would like to do

render () { 
    return (<div id="container">
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        {featureAEnabled ? 
        (<div className="featureA">featureA enabled content</div>
        <div className="featureA">featureA enabled content</div>) :
        (<div className="old">featureA disabled content</div>
        <div className="old">featureA disabled content</div>)
    </div>);
}

The issue is you cannot return multiple elements in React, you must always return a single element.

My current solutions involve

Rewrite all my css to allow for elements to encapsolate any of these feature switches
Do the following:

code:

render() { 
    return (<div id="container">
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        <div className="shared">shared content here</div>
        {featureAEnabled && <div className="featureA">featureA enabled content</div>}
        {featureAEnabled && <div className="featureA">featureA enabled content</div>}
        {!featureAEnabled && <div className="old">featureA disabled content</div>}
        {!featureAEnabled && <div className="old">featureA disabled content</div>}
    </div>);
}

Is there a way to allow for codeblocks that are based on a condition and render multiple elements like in my first code snippet?

You can put those featureA and featureB div under one div na? — Bharath M Shetty, Jul 03 '17 at 16:21
that was solution #1. It is completely viable except I have lots of code that I'm converting into ReactJS and that would slow the conversion drastically. — Daniel Moses, Jul 03 '17 at 17:19

score 1 · Accepted Answer · answered Jul 03 '17 at 16:51

1

Ideally you should try to separate 'featureAEnabled' and 'featureADisabled' elements in separate components and then render them.

Other way of doing that is to have your 'featureAEnabled' and 'featureADisabled' elements in an array and return it. Like below:

render() {
    let renderFeatureA = [
        <div >featureA enabled content</div>,
        <div >featureA enabled content</div>
    ];
    let disableFeatureA = [
        <div >featureA disabled content</div>,
        <div >featureA disabled content</div>
    ];

    let renderItems = featureAEnabled ? renderFeatureA : disableFeatureA;

    return (
    <div id="container">
        <div >shared content here</div>
        <div >shared content here</div>
        <div >shared content here</div>
        {renderItems}
    </div>
    )
};

answered Jul 03 '17 at 16:51

Upasana

1,937
1
14
17

1

You need to add keys. – Sulthan Jul 03 '17 at 16:55
Keys for what ? – Upasana Jul 03 '17 at 16:56
1

When you put elements into an array, you need to add `key=`. https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js https://facebook.github.io/react/docs/lists-and-keys.html – Sulthan Jul 03 '17 at 16:59
@Sulthan Agreed. Keys are helpful when ReactJs need to update the dom. But In given scenario I am assuming these elements are render altogether there is not any conditions involved as to which elements are getting rendered. However, I just pointed out the possible solution for the given problem. Other implementation details needs to be taken care by the coder. But yes keys can be added as good practice. – Upasana Jul 03 '17 at 17:05
I was unaware you could use array of elements alongside other elements, I thought they were the only children of their parents. This works for me. Thanks – Daniel Moses Jul 03 '17 at 17:18
@Upasana It's not just a good practice. You will get a warning if you don't add the keys. – Sulthan Jul 03 '17 at 17:34
@DMoses No problem, glad it helped. However, I recommend you to separate them in different components and use them. As it will help you in longer run if you want to have any additional functionality in it and code will be clean and maintainable. :) – Upasana Jul 03 '17 at 17:41

score 0 · Answer 2 · answered Jul 03 '17 at 16:23

0

One way to do this is to just toggle a class in your render.

let featureEnabledClasses = 'hidden';

if (myCondition === true) {
  featureEnabledClasses = '';
}

Then you can just serve up

<div className={featureEnabledClasses}>featureA enabled content</div>

answered Jul 03 '17 at 16:23

jmargolisvt

5,722
4
29
46

My example was simplistic, but I want to do much more than change classes – Daniel Moses Jul 03 '17 at 17:15

React with multi element conditionals

2 Answers2