React rendering string after function with logic/looping - reactjs

Question

Hi I want to render a string with looping logic behind it so I decided to put a function that will return the string
function Leasing(){
let {idLeasingExact} = useParams()
const checkParam = () =>{
//return(idLeasingExact)
dropdownItems.map((item,index) => {
if(idLeasingExact == item.path){
console.log(idLeasingExact)
console.log(item.path)
console.log(item.title)
return(
item.title
)
}
})
}
return(
<div>
<h1>
{idLeasingExact ? checkParam() : "Leasing"
}
</h1>
</div>
)
}
export default Leasing;
here is the dropdown item
export const dropdownItems = [
{
title:'SMF',
path:'1',
cName:'dropdown-link'
},
{
title:'BFI',
path:'2',
cName:'dropdown-link'
},
{
title:'ADIRA',
path:'3',
cName:'dropdown-link'
}
]
I use param and that param will be used in function checkParam to return the result
the checkParam() should return the title(SMF BFI ADIRA) as the result
for example, if it's leasing/1
it should've return the title of SMF
or if it's leasing/2
it should've returned the title of BFI
but it returns null,
although the console log on the browser shows the right item.title just like the example
help appreciated I'm stuck here thanks

Answer 1

So you're not wanting to actually do a map. You gotta find the item on dropdownItems with path equals to idLeasingExact. Try changing your checkParam() function to something like this:
const checkParam = () => {
const item = dropdownItems.find(x => x.path == idLeasingExact);
if (item) return item.title;
else {
// do whatever you want if path is not found, for example:
return 'No title found.'
}
}
What your code is doing, is some sort of a conditional mapping and the function checkParam() is not actually returning something if you take a close look (the function inside the map does return the .title, not the checkParam()!)

Answer 2

map() returns a list. checkParam() is not returning that list. Just add return to the function-
const checkParam = () =>{
return dropdownItems.map((item,index) => {
if(idLeasingExact == item.path){
return(
item.title
)
}
})
}
Also, you can add your JSX logic in checkParam itself like this-
const checkParam = () => {
return dropdownItems.map((item, index) => {
if (idLeasingExact == item.path) {
return <h1>{item.title}</h1>
} else {
return <h2>{"Leasing"}</h2>
}
})
}
return <div>{checkParam()}</div>
This will give you more control based on idLeasingExact value (e.g. conditional styling)