Q:

Как пройти по объекту как ключ значение

Есть такая структура данных 
 products: {
    1: {
        name: 'Fruit juice',
        description: 'Fresh juice remove your thirst',
        new: true,
        size: ['L', 'S'],
        price: 1999,
        image: 'http://pngimg.com/uploads/juice/juice_PNG7192.png'
    },
    2: {
        name: 'Green Apple',
        description: 'Buy this if you hungry',
        new: false,
        size: ['L', 'XL'],
        price: 1000,
        image: 'http://pngimg.com/uploads/apple/apple_PNG12509.png'
    },
    3: {
        name: 'Red Fox',
        description: 'Beatiful fox for smart people',
        new: true,
        size: ['L', 'XL'],
        price: 1000,
        image: 'http://pngimg.com/uploads/fox/fox_PNG23171.png'
    }
}

Как по ней пройтись .map() как ключ->значение 
До этого products был массивом из объектов , где id был внутри объекта 
{this.props.products.map(function (item, index) {
           return <ProductGridCard data={item} key={index}/>
       }

A:

for (const [val, prod] of Object.entries(products)) {
    for (const key in prod) {
        console.log(`${key} -> ${prod[key]}`);
    }
}

.map() работает только для массивов. у вас - объект. используйте val для обхода по парам ключ-значение самого products, если нужно. 

