React use outside functions as methods

react
1

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

2

Try creating a react component like this…

import React, { Component } from 'react'

export default class FormComponent extends Component {
  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')
    })
  }
}

and then extending it…

import React from 'react'
import Register from './Register.jsx'
import FormComponent from './FormComponent'

class RegisterLogic extends FormComponent {
  render () {
    return <Register
      handleChange={this.handleChange}
      handleSubmit={this.handleSubmit}
      />
  }
}

export default RegisterLogic;