I have a root component that has:

  function aceRender(stepNum: number) {
    switch (stepNum) {
      case 1:
        return (<div><RequestStep1Body /></div>); break;
      case 2:
        return (<div><RequestStep2Body /></div>); break;
      case 3:
        return (<div><RequestStep3Body /></div>); break;
    default:       break;
  }
}
  return (
    <div ><p> Current Step {step}</p>
      <div><RequestHeader /></div>
      {aceRender(step)}
    </div>
  );

'step' is a state that when changed from the inside the 'RequestHeader' component , draws the appropriate child component 'RequestStep{n}Body' But if the state is changed from inside either RequestStep1Body, RequestStep2Body or RequestStep3Body component, the return (<div><RequestStep1Body /></div>); causes the webpart to disappear with error:

TypeError: n is not a function
    at sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70
    at t.unstable_runWithPriority (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at Bi (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at is (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at cs (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at uc (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at t.unstable_runWithPriority (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at Bi (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at lc (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)
    at Xs (sp-webpart-workbench-assembly_en-us_eec15c86d62ce90f8fe18e58491cf728.js:70)

the same code used in a React only app works fine. so I assume the issue is with SPFx.

Any one can show an SPFx example that allows for changing the appetence of component in the web part from inside a visible component? Thanks