TypeScript + React <- 传递道具

Question

I am trying to pass value to component props.
This is what I do:

I create interface:

interface CheckoutItem {
    id: string,
    name: string,
    img: string,
    unitPrice: number,
    amount: number,
}    

I create display component:

const CheckoutDisplay = (items: CheckoutItem[] ) => {
    return (
        <div>
            {items.map(item => (
                <p>
                    {item.name}
                </p>
            ))}
        </div>
    )
}    

I create container component:

const Checkout = (items: CheckoutItem[], setAmount: any) => {
  return <CheckoutDisplay items={items} setAmount={setAmount} />;    
  // error here:    
  // Type '{ items: CheckoutItem[]; setAmount: any; }' is not assignable to type 
  // 'IntrinsicAttributes & CheckoutItem[]'.
  //  Property 'items' does not exist on type 'IntrinsicAttributes & CheckoutItem[]'.
};

const mapStateToProps = (state: any) => {
  return {
    items: state.items,
  };
};

const mapDispatchToProps = (dispatch: AppDispatch) => {
    return {
        setAmount: (id: number, amount: number) => dispatch(setItemAmount(id, amount)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Checkout);    

What is wrong with my code?
Thank you!

Answer 1

Props are passed as an object to CheckoutDisplay , so you need to destructure them.

interface CheckoutDisplayProps {
  items: CheckoutItem[],
  setItemAmount: any,
}

const CheckoutDisplay: React.FunctionComponent<CheckoutDisplayProps> = ({ items, setItemAmount }) => {
    return (
        <div>
            {items.map(item => (
                <p>
                    {item.name}
                </p>
            ))}
        </div>
    )
}