0

I have the following arrow function in a so called curried format, taken from this SO answer:

const getIntervals = n=> availability=> {}

I need to use it in a React component, written in ES6 syntax, that cannot handle ES7 property initializers due to the implementation.

"Normally" a function in a class context in React has this simple style:

myFunction () {}

But would I convert the getIntervals function to this style?

Community
  • 1
  • 1
Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
  • ES7 doesn't have property initializers. Are you talking about [this proposal](https://jeffmo.github.io/es-class-public-fields/)? – Felix Kling Aug 11 '16 at 03:33

2 Answers2

3

Just define getIntervals as a regular method, but have it return your curried function:

class Example extends Component {
   getIntervals(n) {
      return (availability) => {

      }
   }
   render() {...}
}
Rob M.
  • 35,491
  • 6
  • 51
  • 50
1

Cool to see my work referenced in another question. I'm happy it's working out for you.

@RobM has provided a (per usual) good answer for you but I'll give you another option.

First, it's not necessary for you to keep the function in curried format. Since this is a user-defined procedure, if it serves you better to have it take a tuple, you can make it so ! Converting it is as easy as … †

// curried form
const getIntervals = n=> availability=> { ... }

// uncurried form
const getIntervals = (n,availability)=> { ... }

Then when you call it

// curried form
getIntervals (30) (availability)

// changes to
getIntervals(30, availability)

I generally define functions in curried form, but it is by no means a requirement you must follow. In uncurried form, you could define it directly on your React component like so …

class Example extends Component
  getIntervals (n,availability) {
    // ...
  }
}

Or because getIntervals is a generic and pure function, there's no reason to embed all of its code inside the component. You can just as easily leave it totally separate

// curried
const getIntervals = n=> availability=> { ... }

// or choose uncurried
const getIntervals = (n,availability)=> { ... }

// call it from withint the class
class Example extends Component
  getIntervals (availability) {
    return getIntervals (this.props.intervalLength, availability)
  }
}

Or, now you might see how useless it is to have a wrapper function at all. It's more likely that the return value is going to be used in some other way, like in an event handler or some state mutation …

const getIntervals = (n,availability) => { ... }

class Example extends Component {
  // constructor ...
  onclick (event) {
    let intervals = getIntervals(this.props.intervalLength, this.state.availability)
    // do something with intervals
    console.log(intervals)
  }
  render () {
    return <button onClick={e=> onclick(e)}>show intervals</button>
  }    
}

Now getIntervals can leave this file altogether if you want. You could drop it in utils.js and import it

import {getIntervals} from './utils'

class Example extends Component {
  onclick (event) {
    let intervals = getIntervals(this.props.intervalLength, this.state.availability)
     // ...
  }
  // ...
}

I use this.props.intervalLength and this.state.availability as examples. I don't actually know how these two values are associated with the component. I leave that up to you ＾＿＾

† conversion from curried to uncurried procedure is generally simple, but you have to be careful in the event the curried procedure is a recursive one — in which case, you'd also have to update the recursive call to be in uncurried form as well.

I leave this as a footnote because I wrote getIntervals and conversion is simple in this particular scenario

Mulan
  • 129,518
  • 31
  • 228
  • 259