CODEWITHSUNDEEP
javascriptreactjs
Leff
Leff

Reputation: 1330

Getting undefined for the property passed to the child component

I have a parent class component where I am setting the local set like this:

constructor(props) {
    super(props);
    this.state = {
      toogleForms: props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })),
    };

    this.removePeriodCallback = this.removePeriodCallback.bind(this);
  }

Since, on intial rendering I don't get perioder from the props I am using componentWillReceiveProps to update local state:

componentWillReceiveProps(props) {
    const toogleFormsLength = this.state.toogleForms.length;

    if (toogleFormsLength < props.perioder.length) {
      const addedPeriod = props.perioder
        .filter((periode, index) => index >= toogleFormsLength)
        .map((periode, index) => ({ index: toogleFormsLength + index, open: !periode.bekreftet }));

      this.setState({ toogleForms: this.state.toogleForms.concat(addedPeriod) });
    }

    if (toogleFormsLength > props.perioder.length) {
      const toogleForms = this.state.toogleForms.filter((periode, index) => index < toogleFormsLength - 1);

      this.setState({ toogleForms });
    }
  }

Then, I am sending the toogleForms from the local state to redux-form fieldArray component, like this:

  <FieldArray
      name="perioder"
      component={UttakPeriode}
      removePeriodCallback={this.removePeriodCallback}
      inntektsmelding={inntektsmelding}
      toogleForms={this.state.toogleForms}
      toggleFormCallback={this.toggleFormCallback}
    />

But, in the UttakPeriode component where I am receiving this props, I am getting undefined when I am trying to use it:

export const UttakPeriode = ({
  fields, inntektsmelding, removePeriodCallback, toggleFormCallback, toogleForms,
}) => (
  <div>
    {fields.map((fieldId, index) => {
      const tilDato = fields.get(index).tom;
      const fraDato = fields.get(index).fom;
      const { uttakPeriodeType, bekreftet, utsettelseÅrsak } = fields.get(index);
      const arbeidsgiverNavn = inntektsmelding[0].arbeidsgiver;
      const showForm = toogleForms.filter(el => el.index === index)[0].open;

This is the error:

TypeError: Cannot read property 'open' of undefined in UttakPeriode (created by ConnectedFieldArray)

I am not sure, but I guess the child component gets rendered before it receives the props, so that's why it is undefined. But, how can I fix this?

Upvotes: 0

Views: 54

Answers (2)

ReyHaynes
ReyHaynes

Reputation: 3102

Your asking for a lot of states to be in place and available at the same time. I'd just break down that last line from the UttakPeriode function into 2 parts and check to see if there is data available before trying to use the open property.

Replace:

const showForm = toogleForms.filter(el => el.index === index)[0].open;

With:

const form = toogleForms.filter(el => el.index === index)[0];
const showForm = (form) ? form.open : null;
// ...error handle or return if showForm == null

Upvotes: 1

Artem Mirchenko
Artem Mirchenko

Reputation: 2170

toogleForms is not undefined because you can filter it, so you just get empty array after filtering toogleForms.

Try to console.log(toogleForms.filter(el => el.index === index)) at first to see if it have any elements.

Upvotes: 0

Related Questions