JSFiddle - React, Tailwind, and code Playground

JavaScript

var data = {
    "records": [{
        "ColorId": "3",
        "ColorName": "Red",
        "GenderId": "3",
        "GenderName": "Female",
        "SizeId": "1",
        "SizeName": "N\/A"
    }, {
        "ColorId": "2",
        "ColorName": "Green",
        "GenderId": "2",
        "GenderName": "Male",
        "SizeId": "1",
        "SizeName": "N\/A"
    }, {
        "ColorId": "3",
        "ColorName": "Red",
        "GenderId": "2",
        "GenderName": "Male",
        "SizeId": "1",
        "SizeName": "N\/A"
    }]
}

var color = [];
var gender = [];
var size = [];

for( var i = 0, l = data.records.length; i < l; i++ ) {
	color.push({ColorId: data.records[i].ColorId, ColorName: data.records[i].ColorName});
	gender.push({GenderId: data.records[i].GenderId, GenderName: data.records[i].GenderName});
	size.push({SizeId: data.records[i].SizeId, SizeName: data.records[i].SizeName});
}

console.log(color);
console.log(gender);
console.log(size);