how to access a particular object element in array - reactjs

Question

I have used a map function to using reduce and I got an array of objects.
How can I get a particular value in the "return"?
Below is the console output
{design job: Array(2)}
design job: Array(2)
0:
fullName: "Rakesh"
phoneno: "1111111111"
__proto__: Object
1:
fullName: "test user"
phoneno: "9176837787"
__proto__: Object
length: 2
__proto__: Array(0)
__proto__: Object
Below is my code
const list = appliedCandidates.reduce(
(appliedCandidate, { Title, fullName, phoneno }) => {
(appliedCandidate[Title] = appliedCandidate[Title] || []).push({
fullName: fullName,
phoneno: phoneno
});
return appliedCandidate;
},
{}
);
console.log(list);
return (
<div>
{Object.keys(list).map((item, i) => {
return (
<ul>
{item}
<li key={i}>{item.fullName}</li>
</ul>
);
})}
</div>
);

Answer 1

Assuming your data looks like this:
const jobs = {
"design job": [
{
fullName: "Rakesh",
phoneno: "1111111111"
},
{
fullName: "test user",
phoneno: "9176837787"
}
],
"another job": [
{
fullName: "Rakesh",
phoneno: "1111111111"
},
{
fullName: "test user 2",
phoneno: "9176837787"
}
]
};
Here's the code that returns the JSX to display all the jobs, and for each job, all the candidates:
return Object.entries(jobs).map(([title, candidates]) => (
<ul>
<h3>{title}</h3>
{candidates.map((c, i) => (
<li key={i}>{c.fullName}</li>
))}
</ul>
));

Answer 2

function iMGroot() {
let appliedCandidates = [{
Title: 'title-1',
fullName: 'fullName-1',
phoneno: 'phoneno-1'
},
{
Title: 'title-11',
fullName: 'fullName-11',
phoneno: 'phoneno-11'
},
{
Title: 'title-12',
fullName: 'fullName-12',
phoneno: 'phoneno-12'
},
{
Title: 'title-13',
fullName: 'fullName-13',
phoneno: 'phoneno-13'
}, {
Title: 'title-14',
fullName: 'fullName-14',
phoneno: 'phoneno-14'
}
]
const list = appliedCandidates.reduce(
(appliedCandidate, {
Title,
fullName,
phoneno
}) => {
(appliedCandidate[Title] = appliedCandidate[Title] || []).push({
fullName: fullName,
phoneno: phoneno
});
return appliedCandidate;
}, {}
);
console.log(list);
return ( `<div> ${Object.keys(list).map((item, i) => {
return (
`<ul>
${list[item].map(lItem=>{
return `
<li>${lItem.fullName}</li>
<li>${lItem.phoneno}</li>
`
})}
</ul>`
)
})}</div>`
);
}
console.log(iMGroot())
PS: see the return statement of function iMGroot.
Since definition of appliedCandidates is missing, I've filled it in the above function.