The worm The worm - 16 days ago 5
HTML Question

Passing props in react without rendering anything

First of all, does it make sense to do this?

Secondly I'll explain why I am thinking of doing this.

I have a component where I get the user to click 1 of 2 options. either yes or no.
They either get added to the yesArray or noArray. This component is called

Decision
.

Once they click Yes or No then I render the
Thanks
component. I want the arrays of people who said yes and the arrays of people who said no to be shown on this thanks page.

The problem is the logic to make the arrays is in
Decision
but I want it to be shown on
Thanks
but if I pass a prop down like this from the
Decision
component:

<Thanks
showYesArray={this.state.yesArray}
/>


Then this will render the
<Thanks />
component whenever
<Decision />
is rendered but in my parent component
<Thanks />
should only be rendered when it is triggered by a state change and this can be different to when
<Decision />
is rendered

Can post more code if necessary and explain more too

Answer

The state should be in a container element that holds both the Thanks and Decision Element.

render() {
  return (
    <Decision
      onYes={this.handleYes}
      onNo={this.handleNo}
    />

    <Thanks
      active={this.state.thanksActive}
      yesArray={this.state.yesArray}
      noArray={this.state.noArray}
    />
  )
}