How To Pass Array of Objects to Component-CodePudding

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.

CodePudding user response：

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} ...

CodePudding user response：

There is a typo: item vs items.

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

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