Search code examples
typescriptreact-typescript

typescript react props validation not working

I am new to typescript and can't seem to figure out the issue. I have created an interface and checking the props. its is working if props is empty but I am expecting a string and if number is passed it is not giving any error.

type Props = {
  name: number;
};

const ProductListItem = ({ name }: Props): JSX.Element => {
  return (
    <div className="product">
      <h4>{name}</h4>
    </div>
  );
};

export default ProductListItem;

Using the Component here like this

    import "./ProductList.scss";
import ProductListItem from "./ProductListItem";

interface Product {
  _id: string;
  itemName: string;
}
type Props = {
  allProducts: Array<Product>;
};

const ProductList = ({ allProducts }: Props): JSX.Element => {
  console.log(allProducts);
  const productsTodisplay = allProducts.map((product: any) => (
    <ProductListItem key={product._id} title={product.itemName} />
  ));
  return <section className="productsContainer">{productsTodisplay}</section>;
};

export default ProductList;
Solution

  • For a proper type checking in React Functional Component you could add its type to generic type parameter

    Something like this:

    import React, { FunctionComponent } from "react";

type Props = {
  name: number;
};

const ProductListItem: FunctionComponent<Props> = ({ name }) => {
  return (
    <div className="product">
      <h4>{name}</h4>
    </div>
  );
};

export default ProductListItem;