Show values according to condition in reactjs

Question

I'm developing an application in React.JS

I have the array:

array =
        [
            {
                "id": 1,
                "user": {
                    "id": 1,
                    "name": "user-1"
                },
                "date": "2021-01-10",
                "hour": {
                    "id": 1,
                    "time": "09:30:00.000"
                },
                "duration": {
                    "id": 1,
                    "time": 30
                },
                "type": {
                    "id": 1,
                    "name": "type-1"
                },
                "prof": {
                    "id": 1,
                    "name": "prof-1"
                },
            },
            {
                "id": 2,
                "user": {
                    "id": 2,
                    "name": "user-2"
                },
                "date": "2021-01-14",
                "hour": {
                    "id": 2,
                    "time": "10:00:00.000"
                },
                "duration": {
                    "id": 1,
                    "time": 45
                },
                "type": {
                    "id": 1,
                    "name": "type-1"
                },
                "prof": {
                    "id": 1,
                    "name": "prof-1"
                },
            }
        ]

and:

hour =
        [
            {
                "id": 1,
                "time": "09:30:00.000"
            },
            {
                "id": 2,
                "time": "10:00:00.000"
            },
            {
                "id": 3,
                "time": "10:30:00.000"
            }
        ]

I need to show in a select only the hours that are not available given the equality condition in prof and day.

To try to do this I tried with

{
    array.map(item => {
        if (item.prof.id === "1" && item.date === "2021-01-14"){
            return (
                hour.map(elem => {
                    if (elem.id != item.hour.id){
                        return <option value={elem.time.id}>{elem.hour.time}</option>
                    }
                })
            );
        }
    })
}

In short I need to show the available hours.

For the example case, it should only show as an option: 09:30:00.000 and 10:30:00.000, as available hours.

How can I do it, suggestions?

Answer 1

your code works perfectly with some little changes:

1. === Operation checks type and value, in this case, prof.id has number type and not equal to string 1.

2. value and text of the options component should be elem.id and elem.time.

const OptionCreator = () => {
    const profBusyHours = array
      .filter((item) => item.prof.id === 1 && item.date === "2021-01-14")
      .map((item) => item.hour.id);
    return hour
      .filter((elem) => profBusyHours.includes(elem.id) === false)
      .map((elem) => (
        <option key={elem.id} value={elem.id}>
          {elem.time}
        </option>
      ));
  };