How To Pass Array of Objects to Component

Question

I have the following array of objects.

{
  "_id": {
    "$oid": "5f15d92ee520d44421ed8e9b"
  },
  "image": "",
  "brand": "IKEA",
  "price": 350.9,
  "rating": 5,
  "numReviews": 0,
  "isFeatured": true,
  "name": "Garden Chair",
  "description": "beautiful chair for garden",
  "category": {
    "$oid": "5f15d5b7cb4a6642bddc0fe8"
  },
  "countInStock": 10,
  "__v": 0
},{
  "_id": {
    "$oid": "5f15d964e520d44421ed8e9c"
  },
  "image": "",
  "brand": "OBI",
  "price": 1350.9,
  "rating": 5,
  "numReviews": 0,
  "isFeatured": true,
  "name": "Swimming Pool",
  "description": "beautiful Swimming Pool for garden",
  "category": {
    "$oid": "5f15d5b7cb4a6642bddc0fe8"
  },
  "countInStock": 10,
  "__v": 0

I tried to pass it to a component called ProductCard in the following way.

From ProductContainer -> <FlatList <ProductList /> /> -> ProductCard.

I can see the objects inside ProductList using console.log(), but I cannot render (or print in console) the item.price inside ProductCard.

ProductContainer.js

const data = require("../../assets/data/products.json");
...

const ProductContainer = () => {
  ...

  return (
    <View>
      <Text>Product Container</Text>
      <View style={{ marginTop: 100 }}>
        <FlatList
          data={products}
          renderItem={({ item }) => <ProductList key={item.id} item={item} />}
          keyExtractor={(item) => item.name}
          numColumns={2}
        />
      </View>
    </View>
  );
};

export default ProductContainer;

And then to ProductList.js

import ProductCard from "./ProductCard";

var { width } = Dimensions.get("window");

const ProductList = (props) => {
  const { items } = props;
  console.log(items.price);
  <TouchableOpacity style={{ width: "50%" }}>
    <View style={{ width: width / 2, backgroundColor: "gainsboro" }}>
      <ProductCard {...item} />
    </View>
  </TouchableOpacity>;
};

export default ProductList;

and finally, ProductCard.js

const ProductCard = ({ props }) => {
  // console.log(props);
  const item = props;

  return (
    <View>
      <Text>{props.price}</Text>
    </View>
  );
};

Please help. Thanks.

I have tried to debug using console.log(). See above for the details.

Item seems to be undeclared in <ProductCard {...item} />

Slava Knyazev
– Slava Knyazev

2022-12-31 03:27:15 +00:00
Commented Dec 31, 2022 at 3:27 — Slava Knyazev
– Slava Knyazev, Commented Dec 31, 2022 at 3:27

user18309290 · Accepted Answer · 2022-12-31 05:39:44Z

1

There is a typo: item vs items.

<ProductList key={item.id} item={item} />

const ProductList = (props) => {
  const { items } = props;
...
};

answered Dec 31, 2022 at 5:39

user18309290

8,5003 gold badges9 silver badges32 bronze badges

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

Comments

Nora Söderlund · Accepted Answer · 2022-12-31 03:43:02Z

0

You should be passing items as a property in ProductList:

import ProductCard from "./ProductCard";

var { width } = Dimensions.get("window");

const ProductList = (props) => {
  const { items } = props;
  console.log(items.price);
  <TouchableOpacity style={{ width: "50%" }}>
    <View style={{ width: width / 2, backgroundColor: "gainsboro" }}>
      <ProductCard item={item} />
    </View>
  </TouchableOpacity>;
};

export default ProductList;

{...item} would distribute each property of item into its own prop, e.g. it's equivalent of

image={""} brand={"IKEA"} price={350.9} rating={5} ...

answered Dec 31, 2022 at 3:43

Nora Söderlund

1,2115 silver badges19 bronze badges

Collectives™ on Stack Overflow

How To Pass Array of Objects to Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related