Function props with functional component - is not a function (React + TypeScript)

Question

I have a functional component with a function prop that does not work. So...

export interface IPanelProps {
  itemID; number;
  Open: boolean;
  onClose: () => void;
}


const FabricPanel: FC<IPanelProps> = ({ onClose, Open, itemID }) => {
  let _OnCancelClick = () => {
    onClose();
  }

  return (
    <Panel isOpen={Open}>
      <h2>{itemID} </h2>
      <DialogFooter>
        <DefaultButton text="Cancel" onClick={_OnCancelClick} />
        <PrimaryButton text="Save" />
      </DialogFooter>
    </Panel>
  )
}

Getting the error:

Uncaught TypeError: onClose is not a function

Open and Item ID props are working just fine, is it because I am calling a function prop? I have tried to put (props) instead and this did not work.

How can I fix this?

On the parent component:

   _renderPanelComponent = (props: any) => {
    const element : React.ReactElement<IPanelProps> = React.createElement(FabricPanel, assign({
      itemID : null,
      Open : false,
      OnClose : null
      

    }, props))
    ReactDom.render(element, this.panelPlaceHolder);
  }

  _showPanel = (itemID : number) => {
    this._renderPanelComponent({
      itemID,
      Open : true,
      OnClose : this._dismissPanel
      
      
    })
  }

  _dismissPanel = () =>{        
    this._renderPanelComponent({ isOpen: false });   
 }

When a button is pressed on SharePoint the arrow function Showpanel is executed and this works fine, but the onClose doesn't work.

This looks fine. Typescript recognizes it is a function. TypeError happens at runtime - it looks like onClose isn't defined, or is not a function. Try debugging what onClose is at run time (i.e console.log(onClose)) — Oli
– Oli, Commented Apr 30, 2020 at 10:19
there's a typo itemID; should be itemID:. although everything else looks fine. can u console.log(typeof onClose)? — deadcoder0904
– deadcoder0904, Commented Apr 30, 2020 at 10:21
when i console log onClose it comes back as undefined ?? Why is this ? — Jason_Hough
– Jason_Hough, Commented Apr 30, 2020 at 10:33
@Jason_Hough because you are passing nothing from the parent component. whoever is using <FabricPanel /> must pass onClose property which is a function. For example, <FabricPanel onClose={() => {}} /> — deadcoder0904
– deadcoder0904, Commented Apr 30, 2020 at 10:45
@deadcoder0904 - I have updated the issue with some of the parent component.. I get what your saying completely, can you have 2 mins to have a look please ? — Jason_Hough
– Jason_Hough, Commented Apr 30, 2020 at 10:54

Jason_Hough · Accepted Answer · 2020-04-30 12:24:36Z

1

OnClose is spelt differently between the functional component and the parent comonent. So both are spelt onClose - sorted!

answered Apr 30, 2020 at 12:24

Jason_Hough

5041 gold badge19 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Function props with functional component - is not a function (React + TypeScript)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related