whats wrong with this array map via typescript syntax

Question

I have the following state declaration:

constructor(props: any) {
    super(props);

    this.state = {
        orders: []
    };
}

where orders is an array of these Order structures:

interface Order {
    symbol: string,
    qty: number,
    side: Side
}

I want to map over the orders array like so:

this.state.orders.map( ( {order}, index: number) => {
    return <li key={index}>order.symbol order.qty</li>;
})

I am playing with parenthesis and curlys, cant get the syntax right, not quite sure what I am doing. My intent is "loop over the array of orders in the render method and display it"

Thank you very much

Christian Santos · Accepted Answer · 2018-01-28 22:56:01Z

2

You don't need to destruct order in your map function. In your current syntax, map is expecting an object that has an order property for each element in the orders array.

You can simply remove the curly braces to access each order. Also, make sure you use curly braces in your JSX to differentiate between text and JS expression:

this.state.orders.map( (order: Order, index: number) => {
    return <li key={index}>{order.symbol} {order.qty}</li>;
})

See more about object destructuring.

edited Jan 28, 2018 at 22:56

answered Jan 28, 2018 at 22:50

Christian Santos

5,4551 gold badge20 silver badges24 bronze badges

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

4 Comments

alernerdev Over a year ago

thank you, this is great -- it fixes all red squiggles , but one. For "this.state" it shows [ts] ':' expected. (property) this: any

Christian Santos Over a year ago

It sounds like it may need the type of each element in the map to be explicit, so something like (order: Order, index: number): JSX.Element or (order: Order, index: number): any if the former does not work

alernerdev Over a year ago

No, Christian, your suggestion does not change anything -- the addition of what you are suggesting does not seem to hurt, but the period in this.state is still red, still complaining. thank you

alernerdev Over a year ago

Never mind, there was another set of curlys around my map statement -- I thought they were a no-op, but I guess not. thank you

dashton · Accepted Answer · 2018-01-28 22:45:59Z

1

It would be :

this.state.orders.map( ( { symbol, qty }, index: number) => {
    return <li key={index}>{symbol} {qty}</li>;
})

answered Jan 28, 2018 at 22:45

dashton

2,7341 gold badge18 silver badges16 bronze badges

Collectives™ on Stack Overflow

whats wrong with this array map via typescript syntax

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related