snowberb – 13-45 Mar 27 - Reactiflux

I have an array of objects which consists of information about the properties of a building. This array can have just 4 or more than 500 properties depending on the apartment complex. Based on this array, and the information of each property, I have to render some inputs which are Block, Stair, Floor and Door. In that said order, I have to populate the next input only with the matching data based on what the user selected. For example, if the Block 3 only has stairs E, F, G, only these options are going to show up in the Stairs input. And its the same for the next ones, if the Stair E has only floors 5 and 6, only these will show up on the Floor input. The problem im facing with my code now, is that Blocks, Stairs and Floors are optional and may not be available. I do not know how I can rearrange my code so that if the property "block" or "stair" or "floor" is missing, the filter automatically works with the next available piece of information. This is what I have: ```js const blocks = [...new Set(properties.map(({ block }) => block))].map(block => ({ id: block, value: block, label: block })); const stairs = [...new Set(properties.filter(({ block }) => block === selectedBlock).map(({ stair }) => stair))].map(stair => ({ id: stair, value: stair, label: stair, })); const floors = [ ...new Set(properties.filter(({ block, stair }) => block === selectedBlock && stair === selectedStair).map(({ floor }) => floor)), ].map(floor => ({ id: floor, value: floor, label: floor })); const doors = [ ...new Set( properties .filter(({ block, stair, floor }) => block === selectedBlock && stair === selectedStair && floor === selectedFloor) .map(({ door }) => door), ), ].map(door => ({ id: door, value: door, label: door })); ```