CODEWITHSUNDEEP
reactjstypescript
alernerdev
alernerdev

Reputation: 2064

whats wrong with this array map via typescript syntax

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

Upvotes: 1

Views: 3362

Answers (2)

Christian Santos
Christian Santos

Reputation: 5456

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.

Upvotes: 2

dashton
dashton

Reputation: 2704

It would be :

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

Upvotes: 1

Related Questions