类型“IntrinsicAttributes 和 IntrinsicClassAttributes”上不存在属性“名称”<product> &amp; 只读&lt;{}&gt;'</product>

Question

         ```
   import React , {Component} from "react";
   import Product from "./product";
  export default class Shopping extends Component {
state={
products:[
{    id: 1,
    name: "Laptop", 
    price:"8000",
    photo:"https://picsum.photos/id/1010/60",
    quantity:4
    },
    {id:2,name:"HeadPhone", price:"9000",
photo:"https://picsum.photos/id/1011/60",
quantity:7}]
    }
   render(){
    return(
     <div>
       <h4>Shopping Cart</h4>
      <div>
        {this. state. products. map((prod)=>{
            return ( <Product 
            key={prod.id}
            name={prod.name} />);// this is where I am getting the error
           })}
        </div> 
     </div>
    )}


    }
    ```

Blockquote First time using react and don't understand what's the problem here. any help would be appreciated. I have imported the files correctly still not able to solve this.

Answer 1

You can define the types for the state.

https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/class_components/

type MyProps = {
  // using `interface` is also ok
};
type MyState = {
  products:[
   {    
    id: number,
    name: string, 
    price: string,
    photo: string,
    quantity: number
   }
};
export default class Shopping extends Component<MyProps, MyState> {

  state : MyState={
   products:[
    {    
    id: 1,
    name: "Laptop", 
    price:"8000",
    photo:"https://picsum.photos/id/1010/60",
    quantity:4
    },
    {id:2,name:"HeadPhone", price:"9000",
     photo:"https://picsum.photos/id/1011/60",
     quantity:7}]
    }
   render(){
    return(
     <div>
       <h4>Shopping Cart</h4>
      <div>
        {this. state. products. map((prod)=>{
            return ( <Product 
            key={prod.id}
            name={prod.name} />);// this is where I am getting the error
           })}
        </div> 
     </div>
    )}


    }