Getting an empty array when trying to filter out a single object based on it's Id from react-re-CodePudding

My filter function is currently returning an empty array. Instead of an array containing the matched object based on the Id.

console:

operators (51) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: created_at: "2022-06-02T07:21:08.492Z"id: 3name: "operator1"phone: 1478subdomain: "test101"updated_at: "2022-06-02T07:21:08.492Z"user_id: 1[[Prototype]]: Object1: {id: 4, name: 'operator4', phone: 14785, subdomain: 'test104', created_at: '2022-06-02T13:13:42.898Z', …}2: {id: 5, name: 'operator12', phone: 14782, subdomain: 'test20', created_at: '2022-06-03T06:51:12.950Z', …}3: {id: 2, name: 'test1r', phone: 1234451699, subdomain: 'sub10', created_at: '2022-06-01T15:51:29.098Z', …}4: {id: 6, name: 'operator16', phone: 147823, subdomain: 'test21', created_at: '2022-06-06T14:17:25.576Z', …}5: {id: 7, name: 'operator22', phone: 1478237, subdomain: 'test213', created_at: '2022-06-06T14:59:30.342Z', …}6: {id: 8, name: 'operator23', phone: 14782376, subdomain: 'test2153', created_at: '2022-06-06T17:07:34.840Z', …}7: {id: 9, name: 'crystal parking', phone: 81059218, subdomain: 'sub27', created_at: '2022-06-07T17:56:09.142Z', …}8: {id: 10, name: 'lay park', phone: 70255956, subdomain: 'sub11', created_at: '2022-06-07T22:32:54.829Z', …}9: {id: 11, name: 'monk parking', phone: 82059218, subdomain: 'sub07', created_at: '2022-06-07T22:35:24.980Z', …}10: {id: 12, name: 'mabilla park', phone: 71255956, subdomain: 'sub04', created_at: '2022-06-07T22:38:09.079Z', …}11: {id: 13, name: 'java parking', phone: 81055418, subdomain: 'sub19', created_at: '2022-06-07T23:07:42.734Z', …}12: {id: 14, name: 'loading park', phone: 81159215, subdomain: 'sub24', created_at: '2022-06-07T23:11:51.894Z', …}13: {id: 15, name: 'laya park', phone: 70255752, subdomain: 'test2167', created_at: '2022-06-07T23:25:47.786Z', …}14: {id: 16, name: 'cornerStone park', phone: 70980956, subdomain: 'sub21', created_at: '2022-06-09T08:23:47.909Z', …}15: {id: 17, name: 'IPC Staging', phone: null, subdomain: 'ipc-staging', created_at: '2022-06-09T19:31:21.886Z', …}16: {id: 18, name: 'operator121331', phone: 1245787989, subdomain: 'test46', created_at: '2022-06-16T11:43:54.280Z', …}17: {id: 19, name: 'operator81', phone: 124548, subdomain: 'dsrt7', created_at: '2022-06-16T12:36:08.918Z', …}18: {id: 20, name: 'operator87', phone: 124542, subdomain: 'dsrt5', created_at: '2022-06-16T13:40:33.744Z', …}19: {id: 21, name: 'operator88', phone: 124541, subdomain: 'dsrt9', created_at: '2022-06-17T21:25:24.321Z', …}20: {id: 23, name: 'operator89', phone: 124544, subdomain: 'dsrt11', created_at: '2022-06-17T21:29:02.275Z', …}21: {id: 24, name: 'PLECCO Technologies, Inc.', phone: 184334589, subdomain: 'titos1', created_at: '2022-06-18T05:46:53.596Z', …}22: {id: 25, name: 'sat park', phone: 1923671, subdomain: 'sub13', created_at: '2022-06-18T11:49:40.806Z', …}23: {id: 26, name: 'me park', phone: 1923679, subdomain: 'sub14', created_at: '2022-06-18T13:25:14.101Z', …}24: {id: 27, name: 'lushu park', phone: 1923673, subdomain: 'sub06', created_at: '2022-06-20T07:21:06.236Z', …}25: {id: 28, name: 'lome park', phone: 1923672, subdomain: 'sub09', created_at: '2022-06-20T08:37:14.750Z', …}26: {id: 29, name: 'operator85', phone: 124546, subdomain: 'dsrt13', created_at: '2022-06-21T15:08:52.690Z', …}27: {id: 30, name: 'ladaf park', phone: 1923677, subdomain: 'sub18', created_at: '2022-06-21T15:13:51.959Z', …}28: {id: 31, name: 'operator123', phone: 147821, subdomain: 'test120', created_at: '2022-06-23T00:35:39.639Z', …}29: {id: 32, name: 'operator121339', phone: 1245787982, subdomain: 'test09', created_at: '2022-06-24T13:05:35.451Z', …}30: {id: 33, name: 'operator121332', phone: 1245787981, subdomain: 'test01', created_at: '2022-06-24T23:30:48.697Z', …}31: {id: 34, name: 'authen parking', phone: 19236731, subdomain: 'sub16', created_at: '2022-06-26T14:53:01.328Z', …}32: {id: 35, name: 'larky', phone: 1923675, subdomain: 'sub023', created_at: '2022-06-26T17:21:51.401Z', …}33: {id: 36, name: 'operator131332', phone: 1245747981, subdomain: 'test03', created_at: '2022-06-26T22:18:44.953Z', …}34: {id: 37, name: 'warm park', phone: 1225747981, subdomain: 'test04', created_at: '2022-06-26T22:21:44.050Z', …}35: {id: 38, name: 'wood park', phone: 1623673, subdomain: 'sub018', created_at: '2022-06-26T22:58:01.366Z', …}36: {id: 39, name: 'look park', phone: 1523672, subdomain: 'sub33', created_at: '2022-06-26T23:06:42.957Z', …}37: {id: 40, name: 'vodo park', phone: 1123676, subdomain: 'sub221', created_at: '2022-06-26T23:37:22.580Z', …}38: {id: 41, name: 'demo park', phone: 1923372, subdomain: 'sub031', created_at: '2022-06-27T13:21:47.356Z', …}39: {id: 42, name: 'hilltop parking', phone: 1923674, subdomain: 'sub034', created_at: '2022-06-27T14:11:32.882Z', …}40: {id: 43, name: 'lagos park', phone: 1923572, subdomain: 'sub035', created_at: '2022-06-28T14:21:40.734Z', …}41: {id: 44, name: 'ooiuwdddt', phone: 787494, subdomain: 'subd', created_at: '2022-07-06T16:07:18.592Z', …}42: {id: 45, name: 'latam park', phone: 1922671, subdomain: 'sub091', created_at: '2022-07-06T16:29:14.202Z', …}43: {id: 46, name: 'find parking', phone: 1920674, subdomain: 'sub049', created_at: '2022-07-06T21:06:55.743Z', …}44: {id: 47, name: 'lotus', phone: 787491, subdomain: 'sub016', created_at: '2022-07-07T08:25:42.692Z', …}45: {id: 48, name: 'manti park', phone: 1913676, subdomain: 'sub019', created_at: '2022-07-07T12:34:14.164Z', …}46: {id: 49, name: 'lumbak parking', phone: 1913671, subdomain: 'sub087', created_at: '2022-07-07T17:29:36.156Z', …}47: {id: 50, name: 'agbor park', phone: 1923670, subdomain: 'sub071', created_at: '2022-07-07T17:52:41.114Z', …}48: {id: 51, name: 'lotus1', phone: 787496, subdomain: 'sub634', created_at: '2022-07-07T19:14:03.874Z', …}49: {id: 52, name: 'peak park', phone: 1923676, subdomain: 'sub041', created_at: '2022-07-07T19:39:53.717Z', …}50: {id: 53, name: 'fungy park', phone: 1923571, subdomain: 'sub032', created_at: '2022-07-07T19:53:41.606Z', …}length: 51[[Prototype]]: Array(0)
NewLocation.js:41 

operator []

length: 0[[Prototype]]: Array(0)

My code:

const NewLocations = () => {
  const { operatorId } = useParams();
  console.log('id', operatorId);
  const [successful, setSuccessful] = useState(false);
  const operators = useSelector((state) => state.operators.data)
  console.log('operators', operators);
  const operator = operators.filter((operator) => operator.id === operatorId)
  console.log('operator', operator);
  
  remaining codes...

I really don't know what I'm missing...

I have check similar questions/solutions, but none solve my issue.

CodePudding user response：

The useParams hook will return any values as strings. In your case, you need the operatorId to be a number. You can use parseInt to make the comparison work:

const operator = operators.filter((operator) => operator.id === parseInt(operatorId));

CodePudding user response：

Might be the id that you are extracting is not there in the operators array, that's why you are getting an empty array

you can run this line of code whether the id is there or not

  const operator = operators.filter((operator) => operator.id !== operatorId)