How should functions be written within a React class?

Question

I'm trying to adapt code from a SO answer, with functions and variables written as below:

const getIntervals = n=> availability=> {
}

let availability = [
]

Are those normally fine to use in a react class (see below) or do they need to be rewritten?

class Calendar extends React.Component {}

The reason for asking is that I use a React implementation for Rails and do get an error including that function and variable naming pattern.

score 4 · Answer 1 · answered Aug 09 '16 at 16:57

Pure Functions, which dont modify the passed value, are always fine to use anywhere.

Its also fine to use them in a React Class directly, but common functions like string modifications, array sorting algorithms, which you are using a lot across your app and classes should go in a separate module like

// my-helpers.js

export const countKeysInObject = (data) => {
  if (typeof data !== "object" || Array.isArray(data)) return 0;

  Object.keys(data).length;
}

some other file..

import { countKeysInObject } form 'my-helpers'
// And you can use it everywhere..

@FellowStranger, this was the recommendation I also made in [another answer to one of your questions](http://stackoverflow.com/a/38883679/633183). webdeb + 1 — Mulan, Aug 11 '16 at 17:03

score 2 · Accepted Answer · answered Aug 09 '16 at 16:17

2

If you are using class and extending Component, you can use simple methods for most things:

class Calendar extends React.Component {
  constructor(props) {
    this.date = props.date;
  }

  render() {
    return <span>{this.date.toString()}</span>;
  }
}

Calendar.propTypes = {
  date: React.PropTypes.date.isRequired
};

You cannot use methods for propTypes or anything that would be an initial field if you were using an object literal. Those need to be attached after the class has been declared (propTypes) or in the constructor (initial state).

answered Aug 09 '16 at 16:17

ssube

47,010
7
103
140

So how should the code provided in the question be converted to work? – Fellow Stranger Aug 09 '16 at 16:19
@FellowStranger use methods, unless it was a property (not a method) of the equivalent object literal component. – ssube Aug 09 '16 at 16:26
An alternative would be a [stateless functional component](https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#stateless-functional-components). – sdgluck Aug 09 '16 at 16:33
I am react noob. Just interested to know from you @ssube that, why `propTypes` you didn't define inside the class? – Arup Rakshit Aug 09 '16 at 16:36
1

@ArupRakshit `class` does not support an equivalent of `createComponent({propTypes: {...}})` in the class declaration or constructor, so you need to use `Foo.propTypes` after declaring the class. React has [an example here](https://facebook.github.io/react/docs/reusable-components.html#es6-classes). – ssube Aug 09 '16 at 16:40
Just a tip if you are going to create methods with the `extend` syntax, if you want access to `this` from within the method then you'd need to bind it in the class constructor, eg: `constructor(props) { super(props); this.myMethod = this.myMethod.bind(this); }` – inostia Aug 09 '16 at 17:05
@inostia as with es5 classes, you need to bind event handlers, but `{this.foo()}` will still work as expected (because you are explicitly calling `foo` on `this`). – ssube Aug 09 '16 at 17:40

How should functions be written within a React class?

2 Answers2