Redux form - passing a function as a property to a field array gives undefined

Question

I am trying to pass a function as a property from a parent component to a child redux-form fieldArray component. This is the container component with the function:

  constructor(props) {
    super(props);
    this.removePeriodCallback = this.removePeriodCallback.bind(this);
  }

  removePeriodCallback(periodeId) {
    const { formPrefix, periods} = this.props;

    this.props.reduxFormChange(
      `${formPrefix}.InfoPanel`, 'periods',
      periods.filter((e, i) => i === periodeId)
        .sort((a, b) => a.fom > b.fom),
    );
  }

And I am passing it to a child component like this:

 <FieldArray
      name="periods"
      component={Periods}
      props={{ removePeriodCallback: this.removePeriodCallback }}
    />

And in the child component I have tried to access the function like this:

 export const Periods= ({ fields }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;
      const removePeriodCallback = this.props.removePeriodCallback;   

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

I have also tried to deconstruct it inside arguments of the component:

    export const Periods= ({ fields, removePeriodCallback }) => (
  <div>
    {fields.map((fieldId, index) => {
      const toDate = fields.get(index).tom;
      const fromDate = fields.get(index).fom;

      return (
        <Row key={fieldId}>
          <Column>
            <div>
              <UttakPeriodeType
                toDate ={toDate }
                fromDate ={fromDate }
                removePeriodCallback={removePeriodCallback}
              />

But, both time I have got undefined when I have tried to use the removePeriodCallback

What am I doing wrong, how should I fix this?

Answer 1

Your deconstructed approach is the way to go. I tried with the redux form example and the somefunction in my below code worked, the function got passed

<FieldArray name="members" component={renderMembers} props={{ someFunction }}/>

---

const renderMembers = ({ fields, someFunction }) => (

{fields.map((member, index) => (
  <li key={index}>
    <button
      type="button"
      title="Remove Member"
      onClick={() => someFunction()}
    />

you have to check the UttakPeriodeType component to which you are passing your the function.