How to use ternary operator in return statement that returns an array

Question

I use React 16.0.

I want to return an element conditionally as shown below.

import React from 'react';

export default class App extends React.PureComponent {
    render () {
        return [
            <div className="a"></div>,
            {condition ? <div className="b"></div> : null},
            {condition ? <div className="c"></div> : null}
        ];
    }
}

Is there a way to do this without any extra methods or conditional statements outside the return statement?

thank you for reading.

I made a foolish mistake lol !! Thank you to everyone.

left click
– left click

2017-12-16 17:41:44 +00:00
Commented Dec 16, 2017 at 17:41 — left click
– left click, Commented Dec 16, 2017 at 17:41

Kyle Richardson · Accepted Answer · 2017-12-16 17:38:37Z

5

You're inside an array, not JSX. There is no need to use the curly braces, just do your ternary operation and then put a comma after it.

return [
    <div className="a"></div>,
    condition ? <div className="b"></div> : null,
    condition ? <div className="c"></div> : null
];

Keep in mind, this will create indices with null as their value in the array if the conditions are false.

answered Dec 16, 2017 at 17:38

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2017-12-16 17:51:30Z

2

You don't need to wrap your condition within {} otherwise it makes it an object within array. Also you need to specify unique keys for each item in the array.

const condition = true;
export default class App extends React.PureComponent {
  render() {
    return [
      <div key="a" className="a">a</div>,
      condition?<div key="b" className="b">b</div> : null,
      condition?<div key="c" className="c">c</div> : null
    ];
  }
}
render(<App />, document.getElementById('root'));

CodeSandbox

edited Dec 16, 2017 at 17:51

answered Dec 16, 2017 at 17:40

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

1 Comment

Shubham Khatri Over a year ago

@ibrahimmahrir I didn't say it will create an object, I said it will be treated as an object, and since the syntax inside the object is invalid it throws an error

Niklesh Raut · Accepted Answer · 2017-12-16 17:55:33Z

2

You can simply do it as

export default class App extends React.PureComponent {
    render () {
        var b = condition ? <div className="b"></div> : null;
        var c = condition ? <div className="c"></div> : null;
        return [<div className="a"></div>,b,c];
    }
}

edited Dec 16, 2017 at 17:55

answered Dec 16, 2017 at 17:40

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Comments

Gavin Thomas · Accepted Answer · 2017-12-16 18:00:40Z

0

It looks like you basically have it!

import React from 'react';

export default class App extends React.PureComponent {
    render () {
        return (
            <div>
            <div className="a"></div>
            {condition ? <div className="b"></div> : undefined}
            {condition ? <div className="c"></div> : undefined}
            </div>
        );
    }
}

This will render the first div no matter what, and then only the second and third based on "condition" being true.

edited Dec 16, 2017 at 18:00

answered Dec 16, 2017 at 17:39

Gavin Thomas

1,8772 gold badges13 silver badges19 bronze badges

2 Comments

Andrew Li Over a year ago

You can't do this in React. You'd need a single parent or use an array.

Gavin Thomas Over a year ago

Sorry forgot div wrapper

Collectives™ on Stack Overflow

How to use ternary operator in return statement that returns an array

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related