How to call a function from different component using React with Redux Form?

Question

I am trying to call a function from a component when some Field receives a different value.

For example, I have a component 'FieldSelections' where the user can select values from a Field. When a value is selected I want to call a function fieldValueChanged from a different component called MyComponent.

This is what I've tried

class FieldSelections extends Component {
  handleChange = () => {
    this.child.fieldValueChanged();
  }
}

...

  <Field
      name='field'
      component={renderSelectField}
      onChange={this.handleChange}
  />
  <FieldArray
      name='fieldArray'
      component={MyComponent}
      ref={ obj => this.child = obj; }>
  </FieldArray>

MyComponent.js

class MyComponent extends Component {
  fieldValueChanged = () => {
    console.log('Do Something')
  }
}

But it is giving this error:

_this.child.fieldValueChanged is not a function

What am I doing wrong?

Answer 1

Change

  handleChange = () => {
        this.child.fieldValueChanged();
  }

To

  handleChange = () => {
      this.props.fieldValueChanged();
  }

Make sure you pass fieldValueChanged() as props to FieldSelections component when call it in MyComponent like

In your MyComponent when you call FieldSelections

   <FieldSelections fieldValueChanged={this.fieldValueChanged} />