<div>
<strong>Data 01</strong>
</div>

<div>
<strong>Data 02</strong>
</div>

<div>
<strong>Data 03</strong>
</div>

<div>
<strong>Data 01</strong>
<strong>Data 02</strong>
<strong>Data 03</strong>
</div>

import React from 'react';
import ContentSkuInfo from './CallDataStorage';

const ContenidoUno = (props) => {
  return (
    <div className="contentBox outerBox-first" >
      <a href={props.link}>
        <img src={props.imagen} alt="bloque 01" className="img-wrap" />
      </a>
      <h3>{props.categoria}</h3>
      <img src={props.icono} className="iconic" alt="producto" />
      <span>{props.descripcion}</span>
      <ContentSkuInfo />
      <small>Antes: ${props.antes}</small>
      <div className="containerBotonRow">
        <a href={props.link}><button className="botonRow">¡Lo quiero!</button></a>
      </div>
    </div>
  );
}

export default ContenidoUno;

import React from 'react';
import axios from 'axios';

var productsIds = ['3552357', '2635968BC', '3181464', '3593754'];
var productsIdsJoin = productsIds.join('-');

const getProductDetailAPI = (productsIds, storeId) => ({
    method: 'GET',
    baseURL:`SORRY CAN'T SHOW THIS`,
    auth: {
        username: 'XXXXXXX',
        password: 'XXXXXXX',
    },
    headers: {
        'Content-Type': 'application/json',
    },
    data: {},
});

const ContentSkuInfo = (props) => {
    return (
        <strong>$ {props.prodsNormal}</strong>
    );
}

class DataStorage extends React.Component {

    constructor(props) {
        super(props);
        this.state = { products: [] };
    };

    getWebServiceResponse = (currentList, storeId) => (
        axios(getProductDetailAPI(currentList, storeId))
            .then(response => response.data)
            .then(newData => {
                this.setState({ products: newData.productDetailsJson })
            })
            .catch(e => e)
    );

    componentDidMount() {
        this.getWebServiceResponse(productsIdsJoin, 96);
    };

    render() {
        return (
            <samp>
                {this.state.products.map(skuData =>
                    <ContentSkuInfo
                        prodsName={skuData.name}
                        prodsId={skuData.productId}
                        prodsStatus={skuData.status}
                        prodsPublished={skuData.published}
                        prodsNormal={skuData.NORMAL}
                        prodsCMR={skuData.CMR}
                        prodsAhorro={skuData.savings}
                        prodsCombo={skuData.combo}
                        prodsStock={skuData.stockLevel}
                    />
                )
                }
            </samp>
        )
    }
}

export default DataStorage;