Outputting an array of react components and having access to parent's "this" using a a prop within child

Question

I have an array of components which are all separate views that I am injecting to it's parent via a prop

const steps = 
[ <StepOne wizardContext={shippingObj.from} onAction={this.handleFrom}/>,
  <StepTwo wizardContext={shippingObj.to} onAction={this.handleFrom} />,
  <StepThree wizardContext={shippingObj.weight} onAction={this.handleFrom} />,
  <StepFour wizardContext={shippingObj.shippingOption} onAction={this.handleFrom} />,
  <Confirm wizardContext={shippingObj} onAction={this.handleFrom} />
]
<Wizard steps={steps}/>

In the Wizard component I'm rendering each step based on the actual step

{this.props.steps[this.state.compState]}

Also in the wizard component I have a method

  handleFrom(val) {
    let state = val.stage,
    key = Object.keys(val)[0];
    this.setState({
      wizardContext: { ...this.state.wizardContext, [key]: val[key]}
    })
  }

However onAction is undefined meaning it doesn't have access to "this"

If I include each one of them individually within parent wizard component I do have access to this and it works

/*THIS WORKS */
switch (this.state.compState) {
      case 1:
        return <StepOne onAction={this.handleFrom} data={this.state.wizardContext.from} />
      case 2:
        return <StepTwo onAction={this.handleFrom} data={this.state.wizardContext.to} />
      case 3:
        return <StepThree onAction={this.handleFrom} data={this.state.wizardContext} />
      case 4:
        return <StepFour onAction={this.handleFrom} data={this.state.wizardContext.shippingOption} />
      case 5: 
        return <Confirm shippingLabel={this.state.wizardContext} labelkeys={this.shippingKeys} />
    }

however I want to decouple the steps from the actual wizard

Is there a way to access this or parent methods from the child if the child is an array of components? Is there a cleaner way to do this? the components will render just don't have access to "this" in props Any constructive feedback is appreciated

Jules Dupont · Accepted Answer · 2017-12-15T00:10:17.143

1

The problem is that you are creating your array of steps outside of the Wizard component, so the this context does not point back to the Wizard (and therefore does not have the appropriate handleFrom method).

You can fix this problem by dynamically injecting the correct this.handleFrom method as a prop in the Wizard's render method. First, remove the onAction prop from your steps array:

const steps = 
[ <StepOne wizardContext={shippingObj.from} />,
  <StepTwo wizardContext={shippingObj.to} />,
  <StepThree wizardContext={shippingObj.weight} />,
  <StepFour wizardContext={shippingObj.shippingOption} />,
  <Confirm wizardContext={shippingObj} />
]
<Wizard steps={steps}/>

Then, replace this line:

{this.props.steps[this.state.compState]}

with this:

{
    React.cloneElement(
      this.props.steps[this.state.compState],
      {onAction: this.handleFrom}
    )
}

Make sure you have this.handleFrom = this.handleFrom.bind(this); in the Wizard's constructor so you bind the appropriate context.

What's happening here is that the context for the steps array has no this.handleFrom. So, you inject the onAction={this.handleFrom} prop inside the Wizard component, where the appropriate context is available. For more information on cloneElement, see this question and answer.

edited Dec 15 '17 at 00:10

answered Dec 14 '17 at 23:22

Jules Dupont

7,259
7
39
39

Thanks jdupont for your feedback - I need to update the parent state with data from the child and the handleFrom method needs to be within Wizard I still don't have access to "this" and I have binded it properly – James Daly Dec 14 '17 at 23:36
Would you mind showing the code where you bind the handleFrom method to this? – Jules Dupont Dec 14 '17 at 23:46
within the constructor of Wizard – James Daly Dec 14 '17 at 23:50
this.handleFrom = this.handleFrom.bind(this); – James Daly Dec 14 '17 at 23:50
So just to be clear, the `handleFrom` method lives in the `Wizard` component, and the code snippet where you have `const steps=...` also lives in the `Wizard` component? – Jules Dupont Dec 14 '17 at 23:54
no the steps array is being passed into the wizard component via props – James Daly Dec 14 '17 at 23:55
steps is an array of components – James Daly Dec 14 '17 at 23:56
Oh alright I see. So the problem here is that in the place where you're building that array, the `this` context isn't the `Wizard`'s `this`. Give me a minute to update my answer. – Jules Dupont Dec 15 '17 at 00:01
right how do I get Wizard's "this" I've been searching all day – James Daly Dec 15 '17 at 00:03
I have updated my answer to reflect my new understanding of your question. Let me know if that helps. – Jules Dupont Dec 15 '17 at 00:10
1

ah perfect! didn't know you could use React.cloneElement in that manner have actually never used it - thank you so much - I will check your answer off – James Daly Dec 15 '17 at 00:16
Great to hear. Happy coding! – Jules Dupont Dec 15 '17 at 00:19

Outputting an array of react components and having access to parent's "this" using a a prop within child

1 Answers1