TypeScript and React: Pass component in props and return it from a function
I'm writing a Form component with React and TypeScript. I use Formik for the form logic. I want to pass the <Form /> component a specific form as a prop and render it. Here is what I tried:
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";
export interface Props {
component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactNode => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
The problem is that the line where I return the <FormComponent /> throws the error:
[ts] JSX element type 'FormComponent' does not have any construct or call signatures.
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
How would one do this in TypeScript?
Edit
So I got it working by doing this (thanks to estus):
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactElement } from "react";
export interface Props {
component: React.ComponentType<any>; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactElement<any> => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
reactjs typescript typescript-typings react-props typescript-types
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
add a comment |
I'm writing a Form component with React and TypeScript. I use Formik for the form logic. I want to pass the <Form /> component a specific form as a prop and render it. Here is what I tried:
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";
export interface Props {
component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactNode => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
The problem is that the line where I return the <FormComponent /> throws the error:
[ts] JSX element type 'FormComponent' does not have any construct or call signatures.
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
How would one do this in TypeScript?
Edit
So I got it working by doing this (thanks to estus):
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactElement } from "react";
export interface Props {
component: React.ComponentType<any>; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactElement<any> => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
reactjs typescript typescript-typings react-props typescript-types
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
add a comment |
I'm writing a Form component with React and TypeScript. I use Formik for the form logic. I want to pass the <Form /> component a specific form as a prop and render it. Here is what I tried:
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";
export interface Props {
component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactNode => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
The problem is that the line where I return the <FormComponent /> throws the error:
[ts] JSX element type 'FormComponent' does not have any construct or call signatures.
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
How would one do this in TypeScript?
Edit
So I got it working by doing this (thanks to estus):
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactElement } from "react";
export interface Props {
component: React.ComponentType<any>; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactElement<any> => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
reactjs typescript typescript-typings react-props typescript-types
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
I'm writing a Form component with React and TypeScript. I use Formik for the form logic. I want to pass the <Form /> component a specific form as a prop and render it. Here is what I tried:
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactNode } from "react";
export interface Props {
component: ReactNode; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactNode => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
The problem is that the line where I return the <FormComponent /> throws the error:
[ts] JSX element type 'FormComponent' does not have any construct or call signatures.
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
How would one do this in TypeScript?
Edit
So I got it working by doing this (thanks to estus):
import { Formik, FormikProps } from "formik";
import React, { PureComponent, ReactElement } from "react";
export interface Props {
component: React.ComponentType<any>; // TODO: Change to one of LoginForm or RegisterForm.
handleSubmit(): void;
}
export class Form extends PureComponent<Props> {
renderForm = (formikProps: FormikProps<any>): ReactElement<any> => {
const { component: FormComponent } = this.props;
return <FormComponent {...formikProps} />;
};
render() {
const { handleSubmit } = this.props;
return <Formik render={this.renderForm} />;
}
}
export default Form;
reactjs typescript typescript-typings react-props typescript-types
reactjs typescript typescript-typings react-props typescript-types
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
edited Nov 13 '18 at 21:26
J. Hesters
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
asked Nov 13 '18 at 21:09
J. HestersJ. Hesters
6201131
6201131
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
ReactNode is React element type, while component prop is expected to be React component.
It likely should be:
export interface Props {
component: React.ComponentType;
handleSubmit(): void;
}
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
component prop and renderForm return type aren't connected. The former is a component and the latter is an element.
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53289525%2ftypescript-and-react-pass-component-in-props-and-return-it-from-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
ReactNode is React element type, while component prop is expected to be React component.
It likely should be:
export interface Props {
component: React.ComponentType;
handleSubmit(): void;
}
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
component prop and renderForm return type aren't connected. The former is a component and the latter is an element.
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
add a comment |
ReactNode is React element type, while component prop is expected to be React component.
It likely should be:
export interface Props {
component: React.ComponentType;
handleSubmit(): void;
}
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
component prop and renderForm return type aren't connected. The former is a component and the latter is an element.
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
add a comment |
ReactNode is React element type, while component prop is expected to be React component.
It likely should be:
export interface Props {
component: React.ComponentType;
handleSubmit(): void;
}
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
component prop and renderForm return type aren't connected. The former is a component and the latter is an element.
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
ReactNode is React element type, while component prop is expected to be React component.
It likely should be:
export interface Props {
component: React.ComponentType;
handleSubmit(): void;
}
renderForm has to return a ReactNode, so I can't change ReactNode to ComponentType (the latter would resolve the JSX error).
component prop and renderForm return type aren't connected. The former is a component and the latter is an element.
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
answered Nov 13 '18 at 21:20
estusestus
69.5k21102218
69.5k21102218
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
add a comment |
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
Hi estus, thank you for helping me again 😊I made an edit to the post after your answer, I was just wondering if that is what you meant with your answer?
– J. Hesters
Nov 13 '18 at 21:26
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
You're welcome. Yes, that's what I meant.
– estus
Nov 14 '18 at 6:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53289525%2ftypescript-and-react-pass-component-in-props-and-return-it-from-a-function%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
