Question 136777 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – What typescript type should this JSX code be – React.ReactElement, React.ReactNode, and React.FunctionComponent all fail

I have a prop SubmissionComponent and need to assign a type to it.

It expects some sort of JSX – probably a button but more complicated structure possible.

So an example structure:

const SubmissionComponent = <p>hi</p>;

which is then called with

<Submitter 
   SubmissionComponent={SubmissionComponent} />

if in my Submitter component I define SubmissionComponent like this

SubmissionComponent: React.ReactNode;

and I make a

<SubmissionComponent/>

Then I get the error message where I place the component

JSX element type 'SubmissionComponent' does not have any construct or call signatures.

so ok, how about I change it to

 SubmissionComponent: React.FunctionComponent;

Then I do not get any error in my code where I have placed the <SubmissionComponent/> but I do get an error in my code where I do

<Submitter 
       SubmissionComponent={SubmissionComponent} />

that error being

Type 'Element' is not assignable to type 'FunctionComponent<{}>'.
  Type 'Element' provides no match for the signature '(props: { children?: ReactNode; }, context?: any): ReactElement<any, any>'.

That implies to me that the type should be ReactElement, if I try

 SubmissionComponent: React.ReactElement;

Then again I get the error

JSX element type 'SubmissionComponent' does not have any construct or call signatures.

if I try

 SubmissionComponent: React.ReactElement<any, any>;

I also get the same error

React version is 17.0.2, typescript 4.6.3

Tags:

2

Answers


  1. 0

    const SubmissionComponent = <p>hi</p>; the type of the const is "JSX.Element"

    const SubmissionComponent = () => (
    <p>hi</p>
);

    if u make it a function, then u could use it like a "FunctionComponent" and assign it to "React.ReactNode"

    Login or Signup to reply.
  2. 0

    The type of SubmissionComponent is JSX.Element and you should use it in your Submitter component with curly braces: {SubmissionComponent}.

    Example:

    function Parent() {
  const SubmissionComponent = <p>hi</p>;

  return <Child SubmissionComponent={SubmissionComponent} />
}

type ChildProps = {
  SubmissionComponent: JSX.Element;
}

function Child(props: ChildProps) {
  const { SubmissionComponent } = props;
  return (
    <>
      {SubmissionComponent}
    </>
  )
}

    Playground

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search