CODEWITHSUNDEEP
reactjstypescript
Jess
Jess

Reputation: 650

TypeScript React Function Component name as type

In React.js, I've got a Function Component, and when I use the function name as type, get an error.

code sample:

import * as React from "react";
import { render } from "react-dom";

interface NameViewProps {
  name: string;
}
function NameView({ name }: NameViewProps) {
  return <div>{name}</div>;
}

interface Props {
  // ts error: Cannot find name 'NameView'.ts(2304)
  children: NameView[];
}

class Demo extends React.Component<Props> {
  render() {
    return (
      <div>
        <h2>in demo component with children div array</h2>
        {this.props.children}
      </div>
    );
  }
}

How can I use a function component’s name as a type?

You can try the codesandbox here

Upvotes: 0

Views: 4096

Answers (2)

tolotra
tolotra

Reputation: 3270

interface Props {
  children: (typeof NameView)[];
}

Upvotes: 1

Siddharth Pachori
Siddharth Pachori

Reputation: 169

Use typeof (function name) i.e typeof NameView

Upvotes: 0

Related Questions