React use outside functions as methods

Question

I have some functions that I need to use in several components so I put them in a module like this.

export default class FormFunctions {
  handleChange (event) {
    const changedOne = event.target.name
    const newValue = event.target.value
    const newState = {}
    newState[changedOne] = newValue
    this.setState(newState)
  }
  handleSubmit (infoToPass, toThisMethod) {
    Meteor.call(toThisMethod, infoToPass, function () {
      console.log('userCreate call callback')
    })
  }
}

How can I use them as methods for my components?

I tried it like this but it doesn't work. And well I am not sure if I need any classes at all.

import React, { Component } from 'react'
import Register from './Register.jsx'
import FormFunctions from './FormFunctions'

class RegisterLogic extends Component {

  render () {
    return <Register
      handleChange={this.handleChange}
      handleSubmit={this.handleSubmit}
      />
  }
}

export default RegisterLogic

Answer 1

You can make this work by making two small changes to your code:

1. Instead of this.handleChange, you will have to use FormFunctions.handleChange . To be able to refer the function from the class, you can add static to its definition: static handleChange (event) { or create and use an object of the class.

2. For whatever reason, you call a .bind(this) to tell react components which function to use for something, so your code becomes handleChange={FormFunctions.handleChange.bind(this)} .

Hope this helps.

Answer 2

Can you put the functions in a higher component and pass them down? Basically lift the state up if the logic is going to be the same in multiple.

There is a way to extract them as functions in a util file and then bind them to your class but I don't recommend this, I found it was much better to use a state management file like Redux instead (tiny file size, and other huge benefits).

If you use a state management system like Redux then you can have the setState functionality as a reducer (just a normal function). You would then be able to call other reducers from this reducer and this logic would be available to all components you wish.