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.

Answer 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} /> )));