I am grappling with a typescript issue as I am fairly new to it. My problem lies in the fact that I have defined an interface and I am validating the props. It works fine when the props are empty, but I am supposed to receive a string and if a number is passed instead, no error is being thrown.
type Props = {
name: number;
};
const ProductListItem = ({ name }: Props): JSX.Element => {
return (
<div className="product">
<h4>{name}</h4>
</div>
);
};
export default ProductListItem;
Usage of the Component:
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;