Dictionary values in React props (Typescript)

Question

Given a component Product with a props interface ProductProps defined:

interface ProductProps {
  name: string,
  price: {
    amount: number,
    currency: string
  }
}

how do I assign the values for price in the component tag i.e. I want something to the effect of:

<Product name="Nice Shoes" price.amount={100} price.currency="$" />

Just use an object literal. <Product name="Nice Shoes" price={{amount :100, currency:"$"}} /> — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Jan 28, 2022 at 13:21
Thanks. Gave up too quickly when I tried something similar and left out one set of braces. — Tine S Tsengwa
– Tine S Tsengwa, Commented Jan 28, 2022 at 13:27

Daniel Bellmas · Accepted Answer · 2022-01-28 13:36:51Z

4

Because price is an object too you could pass like so:

<Product name="Nice Shoes" price={{amount :100, currency:"$"}} />

The first set of parenthesis are for the jsx syntax and the second is for the object itself

answered Jan 28, 2022 at 13:25

Daniel Bellmas

6577 silver badges19 bronze badges

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

2 Comments

Thanks. Gave up too quickly when I tried something similar and left out one set of braces.

Your welcome, don't worry happens to all of us :)