typescript react props validation not working

Question

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;

Could you provide where you import your ProductListItem? and how do you test the prop types? — Ryan Le
– Ryan Le, Commented Sep 4, 2021 at 5:03
I am not checking the propTypes, I thought If I set the type in the interface and pass some other value it would throw error? — special3220
– special3220, Commented Sep 4, 2021 at 5:12
Try my answer, if it throws errors. It should be if you not giving any props or wrong prop types. — Ryan Le
– Ryan Le, Commented Sep 4, 2021 at 5:16

Ryan Le · Accepted Answer · 2021-09-04 05:14:59Z

1

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;

answered Sep 4, 2021 at 5:14

Ryan Le

8,5101 gold badge18 silver badges27 bronze badges

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

3 Comments

Ryan Le Over a year ago

Does it help? @special3220?

special3220 Over a year ago

Yes, This approach also works. Also, I found what was wrong with my code, when I was mapping over all the products I set (product: any). When I removed it, it started working

Ryan Le Over a year ago

Super! You could consider marking this accept if it is helpful for you and others who find this.

Collectives™ on Stack Overflow

typescript react props validation not working

1 Answer 1

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

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

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

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

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