Using props as keys - React

1

I know this way of writing is not right but this is the only way to show my thought.

For example, what is the correct way to write

function func1(props) {
return (

myarray.props.someproperties
) }

myarray = some nested data
I am trying to access the nested objects using props. What is the correct way to do it?

2

Can you provide a bit more of an example, ideally with some example props and some JSX? What is your end goal?

3

Below is the code and attached is a picture of what i am writing.
Description of what i want to do.
First I am trying create a product card that is able to display all the different features and items of the product. Then, i created the Productlisting Grid to map the card to every item.
The problem i have is displaying company info. My item data and my company info is in a different file. Each of my item has an associated Company ID with it. So, i am thinking of using the item data as a key to access the company data (nested object) so i can display some company data along with product data. like

mycompanydata.props.someproperty

is there a correct way to do this

1234
12341485×685 84.7 KB

CODE START HERE-------------------------------------------------------------

import React from "react";

import "./ProductListing.scss";

import Col from "react-bootstrap/Col";

import Row from "react-bootstrap/Row";

import { product_info } from "../dummydata/dummydata";

import { company_info } from "../dummydata/companydata";

function ProductListingCard({

  imageslist,

  title,

  price,

  ratings,

  features,

  companyID,

  cominfo

}) {

  return (

    <div className="productlisting-card">

      <Row>

        <Col sm={3} className="card-col-1">

          <img src={imageslist[0]} width="100%" />

          Compare NOW

        </Col>

        <Col sm={7} className="card-col-2">

          <Row>

            <Col sm={12}>

              <h2>{title}</h2>

            </Col>

          </Row>

          <Row>

            <Col sm={6} className="product-listing-card-selling-info">

              <h4>

                {price} <span className="card-unit-price">/per unit</span>

              </h4>

              <h5>{ratings}</h5>

            </Col>

            <Col sm={6} className="product-listing-card-feature-section">

              {Object.entries(features).map(feat => (

                <div>

                  <span className="product-listing-card-featurename">

                    {feat[0]}:

                  </span>{" "}

                  <span className="product-listing-card-featureinfo">

                    {feat[1]}

                  </span>

                </div>

              ))}

            </Col>

          </Row>

        </Col>

        **<Col sm={2} className="card-col-3">**

**          company info**

**          <div>Company{cominfo.f321.companyName}</div>**

**          <div>Rating: {cominfo.f321.ratings}</div>**

**          <div>Company Location: {cominfo.f321.address.country}</div>**

**          <div>Has the company being verified: {cominfo.f321.verif}</div>**

**        </Col>**

      </Row>

    </div>

  );

}


function ProductListingGrid({ prop }) {

  return (

    <div className="productlisting-card-grid">

      {prop.map(info => (

        <ProductListingCard {...info} cominfo={company_info} />

      ))}

    </div>

  );

}


function ProductListingComponent() {

  return (

    <div className="productlisting-container">

      <Row>

        <Col sm={2} className="productlisting-filter-col">

          Filter

        </Col>

        <Col sm={6} className="productlisting-item-col">

          <ProductListingGrid prop={product_info} />

        </Col>

      </Row>

    </div>

  );

}

export default ProductListingComponent;