CODEWITHSUNDEEP
reactjsreact-propsreact-functional-component
Emile ASTIH
Emile ASTIH

Reputation: 3494

React - How to pass props down for the .map function when using functional components

How can I pass the props from the ProductFeatures to the renderFeatures function ? Below is a sample code:

const renderFeatures = (feature) => {
  return (
    <div key={feature.productFeatureTypeId} className="panel panel-default">
      <div className="panel-heading">
        <div className="row row-no-border row-h-10">
          <div className="col-xs-10">
            <a
              className="accordion-toggle"
              data-toggle="collapse"
              href={"#" + feature.productFeatureTypeId}
            >
              <h4 className="panel-title">{feature.productFeatureTypeId}</h4>
            </a>
          </div>
          <div className="col-xs-2 text-right font-size-16">
            <span className="glyphicon glyphicon-circle-arrow-down"></span>
          </div>
        </div>
      </div>

      <div
        id={feature.productFeatureTypeId}
        className="panel-collapse collapse in"
      >
        <div className="panel-body">
          {feature.productFeaturesDescription.map(renderFeatureObjItem)}
        </div>
      </div>
    </div>
  );
};

const ProductFeatures = (props) => {
  let mappedProductFeaturesMembers = getMappedProductFeaturesMembers(
    props.product.productFeatureMembers
  );

  return (
    <div className="panel-group" id="accordion">
      {mappedProductFeaturesMembers.map(renderFeatures)}
    </div>
  );
};

Note that all this code is inside one file named ProductFeatures.js and I am using functional components.

Upvotes: 0

Views: 184

Answers (1)

Domino987
Domino987

Reputation: 8774

You can just pass it in the rednerFeatures like this:

const renderFeatures = (feature, props) => { // Accept both feature and props
  return (
    <div key={feature.productFeatureTypeId} className="panel panel-default">
      <div className="panel-heading">
        <div className="row row-no-border row-h-10">
          <div className="col-xs-10">
            <a
              className="accordion-toggle"
              data-toggle="collapse"
              href={"#" + feature.productFeatureTypeId}
            >
              <h4 className="panel-title">{feature.productFeatureTypeId}</h4>
            </a>
          </div>
          <div className="col-xs-2 text-right font-size-16">
            <span className="glyphicon glyphicon-circle-arrow-down"></span>
          </div>
        </div>
      </div>

      <div
        id={feature.productFeatureTypeId}
        className="panel-collapse collapse in"
      >
        <div className="panel-body">
          {feature.productFeaturesDescription.map(renderFeatureObjItem)}
        </div>
      </div>
    </div>
  );
};

const ProductFeatures = (props) => {
  let mappedProductFeaturesMembers = getMappedProductFeaturesMembers(
    props.product.productFeatureMembers
  );

  return (
    <div className="panel-group" id="accordion">
      {mappedProductFeaturesMembers.map(feature => renderFeatures(feature, props))} // Pass props here too
    </div>
  );
};

Upvotes: 1

Related Questions