score:1

Accepted answer
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>
  );
};

Related Query

More Query from same tag