Send data from an Object to a React Component

Question

Access to data inside an object to send it to a React Component

I'm trying to recover data inside an object which looks like this :

{89: {…}, 91: {…}, 92: {…}}

89: {name: "Confiture de Myrtilles", product_id: "737", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

91: {name: "Poires Guyot (bio)", product_id: "690", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

92: {name: "Pommes Pinova (bio)", product_id: "700", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

I want to work on each "index" ( 89,91,....) and send them one per one to my React component.

So for example the first thing which will use by my React Component will be

{name: "Confiture de Myrtilles", product_id: "737", _wc_review_count: "0", _wc_rating_count: "a:0:{}", _wc_average_rating: "0", …}

I've tried to use map function like this but it does'nt work :


{this.state.Products.map((product, i) => {
                        return (
                            <div>
                            <Product product_data={product}/>
                            </div>
                        );
})}

Thanks if you can help me and tell me if you need more informations

FurkanO · Accepted Answer · 2019-06-14 16:46:37Z

3

Take the values of the object.

{
  Object.values(this.state.Products).map((product, i) => {
    return (
      <div>
        <Product product_data={product}/>
      </div>
    );
  })
}

answered Jun 14, 2019 at 16:46

FurkanO

7,3085 gold badges27 silver badges39 bronze badges

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

Comments

Neil · Accepted Answer · 2019-06-14 17:31:52Z

0

You have an object not an array.

Make an array from object:

const products = Object.values(this.state.products);

Loop over products:

products.map(item => <Product product_data={item}/>)

Let me know how you get on.

——

IMO: I would spread the data, then in the component access each name in <Product />.

Example:

products.map(item => <Product {...item} />)

Then in your component <Product />:

<h1>{this.props.name}</h1>

edited Jun 14, 2019 at 17:31

answered Jun 14, 2019 at 17:10

Neil

9662 gold badges12 silver badges33 bronze badges

2 Comments

Julien Txerriak Guillou Over a year ago

It's the same solution Junius L and it does'nt work.. Thank you for your help and if you want to see, FurkanO has resolved my problem !

Neil Over a year ago

No problem, although updated. I would still note spreading the object would remove an unneeded prop.

Collectives™ on Stack Overflow

Send data from an Object to a React Component

Access to data inside an object to send it to a React Component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Access to data inside an object to send it to a React Component

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related