Returning boolean from arrow function in a react functional component

Question

I'm trying to extract the business logic from my stateless functional components in React 16.2.

This works:

const Jobs = props => (
  props.entries
    .map(entry => (
      <Job
        entry={entry}
        isInitJobExpanded={
          entry.fields.project['en-US'] &&
          props.initJobExpanded &&
          (entry.fields.project['en-US'] === props.initJobExpanded)}
        key={entry.sys.id}
      />
    )));

And when I want to extract isInitJobExpanded, I've tried:

const isInitJobExpandedFunction = ({ entry, props }) => (
  entry.fields.project['en-US'] &&
  props.initJobExpanded &&
  entry.fields.project['en-US'] === props.initJobExpanded
);

const Jobs = props => (
  props
    .map(entry => (
      <Job
        entry={entry}
        isInitJobExpanded={isInitJobExpandedFunction}
        key={entry.sys.id}
      />
    )));

However, I get the error message:

Invalid prop `isInitJobExpanded` of type `function` supplied to `Job`, expected `boolean`.`

I've also tried:

isInitJobExpanded={this.isInitJobExpandedFunction}

isInitJobExpanded={this.isInitJobExpandedFunction()}

isInitJobExpanded={isInitJobExpandedFunction()}

isInitJobExpanded={() => isInitJobExpandedFunction}

etc

Thanks in advance.

isInitJobExpanded={isInitJobExpandedFunction({entry, props)} — Oro
– Oro, Commented Feb 18, 2018 at 13:38

Nik · Accepted Answer · 2018-02-18 13:38:58Z

1

isInitJobExpandedFunction receive an object, that must have two fields: entry and props. So your code is:

const isInitJobExpandedFunction = ({ entry, props }) => (
  entry.fields.project['en-US'] &&
  props.initJobExpanded &&
  entry.fields.project['en-US'] === props.initJobExpanded
);

const Jobs = props => (
  props
    .map(entry => (
      <Job
        entry={entry}
        isInitJobExpanded={isInitJobExpandedFunction({entry, props})}
        key={entry.sys.id}
      />
    )));

answered Feb 18, 2018 at 13:38

Nik

2,2921 gold badge18 silver badges21 bronze badges

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

2 Comments

tgrrr Over a year ago

Thanks! I tried to pass it with {isInitJobExpandedFunction(entry, props)} not {isInitJobExpandedFunction({entry, props})}. Is there a rule of thumb on when to pass it in curly braces or not with arrow functions?

Nik Over a year ago

It depends on the function declaration. You also can declare you arrow function as: const isInitJobExpandedFunction = (entry, props) => {} and call it without curly bracers: isInitJobExpandedFunction(entry, props)

Collectives™ on Stack Overflow

Returning boolean from arrow function in a react functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related