Im building a litigation manager app using RoR as my backend API and React as my frontend. I have a Lawyer component that is supposed to be a profile page of an individual lawyer (object). I used react routes to route the url for the individual object based on the lawyer id maintained in the object.

import React from 'react'
import { useParams } from 'react-router-dom'

const Lawyer = ( {lawyersArray} ) => {
  let params = useParams();
  
function getLawyerId() {
    lawyersArray.find(
      (lawyer) => lawyer.id === params.id
    )
}

let lawyerProfile = getLawyerId(parseInt(params.id));

  return (
    <div>
     {console.log(lawyerProfile)}
    </div>
  )
}

export default Lawyer

However, my lawyerProfile return variable always returns undefined. If I add a console log into my find function, I can see that I have values for params.id and lawyer.id so I am not sure why it says undefined.

function getLawyerId() {
lawyersArray.find(
  (lawyer) => console.log(lawyer.id)
  )
}

This logs out all the lawyer ids in the console.

 function getLawyerId() {
    lawyersArray.find(
      (lawyer) => console.log(lawyer.id)
      )
    }

While this logs out the one params.id that matches the url params. So they do exist but they cant seem to find each other when I use the === operation to return the desired id. I feel like there is a JS fundamental i am missing. In both instances, the return value is an integer of the id.

Here is my backend data.

[
 {
  id: 1,
  first_name: "Howard",
  last_name: "Zelbo",
 },
 {
  id: 2,
  first_name: "Christopher",
  last_name: "Moore",
 },
 {
  id: 3,
  first_name: "Jon",
  last_name: "Blackman",
 }
]

CodePudding user response：

You miss return in getLawyerId function. You can check my code.

import React from 'react'
import { useParams } from 'react-router-dom'

const Lawyer = ( {lawyersArray} ) => {
  let params = useParams();

function getLawyerId() {
    return lawyersArray.find(
      (lawyer) => lawyer.id === params.id
    )
}

let lawyerProfile = getLawyerId();

  return (
    <div>
     {console.log(lawyerProfile)}
    </div>
  )
}

CodePudding user response：

Issues

1. The route path parameters are always strings, you should use a type-safe comparison. It's better to use a string comparison as it covers both strings and number-like strings.
2. The getLawyerId utility function doesn't do anything with the id value that is passed to it, so it's using the un-interger-parsed id parameter closed over in scope.
3. The getLawyerId utility function doesn't return the found lawyer object result.

Solution

const Lawyer = ( {lawyersArray} ) => {
  const { id } = useParams();
  
  function getLawyerById(id) {
    return lawyersArray.find( // <-- return result
      (lawyer) => String(lawyer.id) === id // <-- string to string comparison
    );
  }

  const lawyerProfile = getLawyerById(id); // <-- pass id param

  useEffect(() => {
    console.log(lawyerProfile);
  }, [lawyerProfile]);

  return (
    <div>
     ...
    </div>
  )
}