Using ternary operators instead of if statement when returning variable

Question

How could this conditional statement be simplified? Return statement is being used multiple times. Could for example ternary operators be used in this case?

Is returning null a proper way to hide Components?

import Item from './Item';

const Component = ({data, onChange}) => {

    if (data) {
        const items = data.map(( item ) => {
            return <Item onChange={ onChange } />
        });

        return(
            <ul>{items}</ul>
        );

    } else {
        return(null);
    }
}

export default Component;

Return early. Take the return out of the else, stick it at the top inside an if(!data) and then remove the other if statement. — evolutionxbox
– evolutionxbox, Commented Jul 11, 2017 at 10:33

Chris · Accepted Answer · 2017-07-11 10:51:32Z

4

Is returning null a proper way to hide Components?

Yes, returning null is a valid return value for a React Component. See this section of the official documentation:

Booleans, Null, and Undefined Are Ignored

false, null, undefined, and true are valid children. They simply don't render.

You could shorten your code a bit though:

const Component = ({data, onChange}) => (
  data && data.length ? <ul>
    {data.map(( item ) => <Item onChange={ onChange } />)}
  </ul> : null
)

Note however that you are not using item inside <Item>. Is that intentional? If so, you can write instead: {data.map(() => <Item onChange={ onChange } />)}

Also note that you need to provide a key property to each <Item>. I have not added that to my snippet, but you can read more about the key prop, here.

edited Jul 11, 2017 at 10:51

answered Jul 11, 2017 at 10:36

Chris

59.7k20 gold badges121 silver badges144 bronze badges

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

2 Comments

Kraylog Over a year ago

You can also remove the parenthesis around item, since it's a single parameter function. Also, you can remove the return keyword if you're not using a block in an arrow function.

Chris Over a year ago

@NimrodArgov, yes I missed the return. Fixed that, thanks. I like keeping the parenthesis, but that's just a personal preference.

ConorJohn · Accepted Answer · 2017-07-11 10:41:32Z

2

I didn't get to run it so there may be a bug in there somewhere, but would something like this be suitable?

const Component = ({data, onChange}) => {

  function returnItems(data){
    data.map(( item ) => <Item onChange={ onChange } />
    return(<ul>{items}</ul>);
  }

  const items = data ? returnItems(data) : null;
}

answered Jul 11, 2017 at 10:41

ConorJohn

6772 gold badges13 silver badges26 bronze badges

Collectives™ on Stack Overflow

Using ternary operators instead of if statement when returning variable

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related