TypeScript + React <- passing props

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!

Paul · Accepted Answer · 2020-06-02 12:13:08Z

3

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>
    )
}

edited Jun 2, 2020 at 12:13

answered Jun 2, 2020 at 12:01

Paul

1,0227 silver badges7 bronze badges

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

2 Comments

Nikita Madeev Over a year ago

I think the best practice use const CheckoutDisplay: React.FC<CheckoutDisplayProps>

Nikita Madeev Over a year ago

No, deprecated React.SFC and React.StatelessComponentgithub.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/…

Collectives™ on Stack Overflow

TypeScript + React <- passing props

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related