React multilevel array

Good afternoon, there is an array:

[ { "id": "596e1e157919a897e4800a3b", "name": "Chair L", "description": "Light plastic chair", "imageUrls": [ "/api/image/img2.jpg" ], "materials": [ { "id": "596e1e147919a897e4800a17", "name": "Wood", "description": "The best material, but very expensive material." } ], "colors": [ { "id": "596e1e147919a897e4800a25", "name": "Red", "hexCode": "#FF0000" } ], "volume": { "volume": "MEDIUM" }, "type": "MODEL3D", "brand": { "id": "596e1e147919a897e4800a12", "name": "Palecek", "description": "Alan Palacek created this brand 40 years ago." }, "categories": [ { "id": "596e1e147919a897e4800a23", "name": "sleeping", "description": "all staff for sleeping", "subCategories": [ { "id": "596e1e147919a897e4800a1c", "name": "sofa" }, { "id": "596e1e147919a897e4800a1d", "name": "bed" }, { "id": "596e1e147919a897e4800a1e", "name": "hammock" } ] }, { "id": "596e1e147919a897e4800a24", "name": "storage", "description": "all staff for storage", "subCategories": [ { "id": "596e1e147919a897e4800a1f", "name": "cupboard" }, { "id": "596e1e147919a897e4800a20", "name": "nightstand" }, { "id": "596e1e147919a897e4800a21", "name": "basket" } ] } ], "rooms": [ { "id": "596e1e147919a897e4800a34", "name": "Bedroom", "description": "All staff for bedroom" } ], "urlToShopOrDraw": null, "price": { "id": "596e1e147919a897e4800a2a", "amount": 299, "currency": "Dollars" }, "info": { "Brand": [ "Palecek" ], "Category": [ "sleeping", "storage" ], "Color": [ "#FF0000" ], "Room": [ "Bedroom" ] } }, { "id": "596e1e157919a897e4800a3d", "name": "The best Sofa", "description": "Biggest and cheapest then other sofas", "imageUrls": [ "/api/image/img4.jpg" ], "materials": [ { "id": "596e1e147919a897e4800a16", "name": "Metal", "description": "Strong material." }, { "id": "596e1e147919a897e4800a17", "name": "Wood", "description": "The best material, but very expensive material." } ], "colors": [ { "id": "596e1e147919a897e4800a26", "name": "Blue", "hexCode": "#3914AF" } ], "volume": { "volume": "SMALL" }, "type": "MODEL3D", "brand": { "id": "596e1e147919a897e4800a14", "name": "BOYD", "description": "Another American brand which create furniture." }, "categories": [ { "id": "596e1e147919a897e4800a22", "name": "seats", "description": "all staff for sitting", "subCategories": [ { "id": "596e1e147919a897e4800a19", "name": "chair" }, { "id": "596e1e147919a897e4800a1a", "name": "pouf" }, { "id": "596e1e147919a897e4800a1b", "name": "bench" } ] }, { "id": "596e1e147919a897e4800a23", "name": "sleeping", "description": "all staff for sleeping", "subCategories": [ { "id": "596e1e147919a897e4800a1c", "name": "sofa" }, { "id": "596e1e147919a897e4800a1d", "name": "bed" }, { "id": "596e1e147919a897e4800a1e", "name": "hammock" } ] }, { "id": "596e1e147919a897e4800a24", "name": "storage", "description": "all staff for storage", "subCategories": [ { "id": "596e1e147919a897e4800a1f", "name": "cupboard" }, { "id": "596e1e147919a897e4800a20", "name": "nightstand" }, { "id": "596e1e147919a897e4800a21", "name": "basket" } ] } ], "rooms": [ { "id": "596e1e147919a897e4800a33", "name": "Kitchen", "description": "All staff for kitchen" }, { "id": "596e1e147919a897e4800a34", "name": "Bedroom", "description": "All staff for bedroom" } ], "urlToShopOrDraw": null, "price": { "id": "596e1e147919a897e4800a2c", "amount": 499, "currency": "Dollars" }, "info": { "Brand": [ "BOYD" ], "Category": [ "seats", "sleeping", "storage" ], "Color": [ "#3914AF" ], "Room": [ "Kitchen", "Bedroom" ] } }, { "id": "596e1e157919a897e4800a3f", "name": "Table S", "description": "Strong metal Table! For real man !", "imageUrls": [ "/api/image/img6.jpg" ], "materials": [ { "id": "596e1e147919a897e4800a16", "name": "Metal", "description": "Strong material." }, { "id": "596e1e147919a897e4800a17", "name": "Wood", "description": "The best material, but very expensive material." }, { "id": "596e1e147919a897e4800a18", "name": "Plastic", "description": "Very popular material." } ], "colors": [ { "id": "596e1e147919a897e4800a27", "name": "Green", "hexCode": "#00CB00" } ], "volume": { "volume": "LARGE" }, "type": "MODEL3D", "brand": { "id": "596e1e147919a897e4800a11", "name": "Rowe", "description": "American furniture brand. Started in 1970. Very big fabric." }, "categories": [ { "id": "596e1e147919a897e4800a22", "name": "seats", "description": "all staff for sitting", "subCategories": [ { "id": "596e1e147919a897e4800a19", "name": "chair" }, { "id": "596e1e147919a897e4800a1a", "name": "pouf" }, { "id": "596e1e147919a897e4800a1b", "name": "bench" } ] }, { "id": "596e1e147919a897e4800a23", "name": "sleeping", "description": "all staff for sleeping", "subCategories": [ { "id": "596e1e147919a897e4800a1c", "name": "sofa" }, { "id": "596e1e147919a897e4800a1d", "name": "bed" }, { "id": "596e1e147919a897e4800a1e", "name": "hammock" } ] } ], "rooms": [ { "id": "596e1e147919a897e4800a33", "name": "Kitchen", "description": "All staff for kitchen" }, { "id": "596e1e147919a897e4800a34", "name": "Bedroom", "description": "All staff for bedroom" }, { "id": "596e1e147919a897e4800a35", "name": "Restroom", "description": "All staff for restroom" } ], "urlToShopOrDraw": null, "price": { "id": "596e1e147919a897e4800a2e", "amount": 699, "currency": "Dollars" }, "info": { "Brand": [ "Rowe" ], "Category": [ "seats", "sleeping" ], "Color": [ "#00CB00" ], "Room": [ "Kitchen", "Bedroom", "Restroom" ] } }, { "id": "596e1e157919a897e4800a41", "name": "Table M", "description": "Medium metal/plastic table for kitchen", "imageUrls": [ "/api/image/img8.jpg" ], "materials": [ { "id": "596e1e147919a897e4800a17", "name": "Wood", "description": "The best material, but very expensive material." } ], "colors": [ { "id": "596e1e147919a897e4800a25", "name": "Red", "hexCode": "#FF0000" }, { "id": "596e1e147919a897e4800a26", "name": "Blue", "hexCode": "#3914AF" } ], "volume": { "volume": "MEDIUM" }, "type": "MODEL3D", "brand": { "id": "596e1e147919a897e4800a13", "name": "Maison 55", "description": " American furniture brand" }, "categories": [ { "id": "596e1e147919a897e4800a23", "name": "sleeping", "description": "all staff for sleeping", "subCategories": [ { "id": "596e1e147919a897e4800a1c", "name": "sofa" }, { "id": "596e1e147919a897e4800a1d", "name": "bed" }, { "id": "596e1e147919a897e4800a1e", "name": "hammock" } ] } ], "rooms": [ { "id": "596e1e147919a897e4800a33", "name": "Kitchen", "description": "All staff for kitchen" } ], "urlToShopOrDraw": null, "price": { "id": "596e1e147919a897e4800a30", "amount": 899, "currency": "Dollars" }, "info": { "Brand": [ "Maison 55" ], "Category": [ "sleeping" ], "Color": [ "#FF0000", "#3914AF" ], "Room": [ "Kitchen" ] } }, { "id": "596e1e157919a897e4800a43", "name": "Sofa-Table", "description": "Big sofa with table which integrated in this sofa", "imageUrls": [ "/api/image/img10.jpg" ], "materials": [ { "id": "596e1e147919a897e4800a16", "name": "Metal", "description": "Strong material." }, { "id": "596e1e147919a897e4800a17", "name": "Wood", "description": "The best material, but very expensive material." }, { "id": "596e1e147919a897e4800a18", "name": "Plastic", "description": "Very popular material." } ], "colors": [ { "id": "596e1e147919a897e4800a25", "name": "Red", "hexCode": "#FF0000" }, { "id": "596e1e147919a897e4800a26", "name": "Blue", "hexCode": "#3914AF" }, { "id": "596e1e147919a897e4800a27", "name": "Green", "hexCode": "#00CB00" }, { "id": "596e1e147919a897e4800a28", "name": "Black", "hexCode": "#000000" } ], "volume": { "volume": "SMALL" }, "type": "MODEL3D", "brand": { "id": "596e1e147919a897e4800a15", "name": "Sterling", "description": "Big and famous American brand!" }, "categories": [ { "id": "596e1e147919a897e4800a22", "name": "seats", "description": "all staff for sitting", "subCategories": [ { "id": "596e1e147919a897e4800a19", "name": "chair" }, { "id": "596e1e147919a897e4800a1a", "name": "pouf" }, { "id": "596e1e147919a897e4800a1b", "name": "bench" } ] }, { "id": "596e1e147919a897e4800a23", "name": "sleeping", "description": "all staff for sleeping", "subCategories": [ { "id": "596e1e147919a897e4800a1c", "name": "sofa" }, { "id": "596e1e147919a897e4800a1d", "name": "bed" }, { "id": "596e1e147919a897e4800a1e", "name": "hammock" } ] }, { "id": "596e1e147919a897e4800a24", "name": "storage", "description": "all staff for storage", "subCategories": [ { "id": "596e1e147919a897e4800a1f", "name": "cupboard" }, { "id": "596e1e147919a897e4800a20", "name": "nightstand" }, { "id": "596e1e147919a897e4800a21", "name": "basket" } ] } ], "rooms": [ { "id": "596e1e147919a897e4800a33", "name": "Kitchen", "description": "All staff for kitchen" }, { "id": "596e1e147919a897e4800a34", "name": "Bedroom", "description": "All staff for bedroom" }, { "id": "596e1e147919a897e4800a35", "name": "Restroom", "description": "All staff for restroom" } ], "urlToShopOrDraw": null, "price": { "id": "596e1e147919a897e4800a32", "amount": 1099, "currency": "Dollars" }, "info": { "Brand": [ "Sterling" ], "Category": [ "seats", "sleeping", "storage" ], "Color": [ "#FF0000", "#3914AF", "#00CB00", "#000000" ], "Room": [ "Kitchen", "Bedroom", "Restroom" ] } } ] 

From it I need to get info and all its data (I do it, I get it):

  {Object.keys(item.info).map((key) => { return ( <div className="back-info"> <p className='grey-text text-lighten-1'>{key}</p> <div className="info-data"> <a className='grey-text text-darken-4'>{item.info[key]}</a> </div> </div> ) })} 

Next, I want to make so that the data from the info -> color array is written to the a tag and was in my Object.keys something like this, but I don’t know how to do it exactly:

 <a className='color-box' style={{background: тут value с color}}></a> 

It now looks like this:

but instead of hex code, I want the color to appear.

Tell me how to rewrite the code to get a separate color?