get special labels in a ajax request

Question

I'm making an AJAX request and I get my object correctly; but there's a problem with some labels, these labels have "-" (sales-price i.e.). So when I want to print in the screen I can't call them properly in my JSX code

render(){
    return(
            <div>{
                this.state.products.map((products)=>{
                    return  <div>
                                <p>{productt.id}</p>
                                <p>{productt.name}</p>
                                <p>{productt.sales-price}</p>
                            </div>
                })
            }</div>
            }
        );
}

If anyone wants to learn more about the object there's some links that could help: JSON example
Documentation about the API I'm using

Does this answer your question? [How can I access object properties containing special characters?](https://stackoverflow.com/questions/12953704/how-can-i-access-object-properties-containing-special-characters) — Heretic Monkey, Oct 12 '21 at 17:12

wowandy · Accepted Answer · 2021-10-12T17:19:50.547

0

Try {product['sales-price']} instead of {product.sales-price}

render() {
    return (
        <div>
        {
            this.state.products.map((product) => (
                <div>
                     <p>{product.id}</p>
                     <p>{product.name}</p>
                     <p>{product['sales-price']}</p>
                </div>
            ))
        }
        </div>
    );
}

More about objects

edited Oct 12 '21 at 17:19

answered Oct 12 '21 at 16:49

wowandy

1,124
2
10
23

Where does `productt` come from? – Andy Oct 12 '21 at 16:55
Author uses this variable – wowandy Oct 12 '21 at 16:56
But it's clearly wrong. And your answer didn't solve the problem by reiterating it. – Andy Oct 12 '21 at 17:03
With what reiterating? I have already edited my answer, as you can see – wowandy Oct 12 '21 at 17:08
If you're making the same mistake in your answer that the OP is in their code it's not a good answer. Your answer is much better for the edit. – Andy Oct 12 '21 at 17:11
hi guys, the woandy's solution worked, as the andy's too, thank's a lot. now surges another problems but it's ralationated with the structure of the objec idon't know if you want to help me – Arturo Valezuela Oct 13 '21 at 18:09

Andy · Answer 2 · 2021-10-12T17:07:27.137

You are mapping over an array. The first argument for the map callback is the current element (object) of the array you're iterating over, so ideally it should be product (singular) rather than products (plural). And then you need to access the properties of that object.

If you're returning multiple lines of JSX you should wrap them in parentheses.

Finally, objects which have hyphenate property names need special consideration. You should use bracket notation to access the values.

this.state.products.map(product => {
  return (
    <div>
      <p>{product.id}</p>
      <p>{product.name}</p>
      <p>{product['sales-price']}</p>
    </div>
  );
});

hi, it was my error when i typed for the cueston, i use products all the time i'm gonna try your solution — Arturo Valezuela, Oct 13 '21 at 01:03

get special labels in a ajax request

2 Answers2